W250511/10-vuecli/vueapp/vueadmin/src/views/level/LevelList.vue

<template>
  <div class="level-list">
    <!-- 按钮区域 -->
    <div class="input-content">
      <el-button type="primary" @click="goPage">添加等级</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table-content">
      <el-table :data="tableData" style="width: 100%">
        <!-- <el-table-column label="序号" width="180">
          <template slot-scope="scope">
            {{ scope.$index +1 }}
          </template>
        </el-table-column> -->
        <el-table-column label="序号" type="index" width="100">
        </el-table-column>
        <el-table-column label="等级编号" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.jrid }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="等级名称"
          width="180"
          prop="levelname"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <!-- <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            > -->
            <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="handleDelete(scope.$index, scope.row)">
              <el-button class="del-btn" size="mini" type="danger" slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// 引入axios
import axios from "axios";
export default {
  name: "LevelList",
  data() {
    return {
      tableData: [
        {
          jrid: 1,
          levelname: "普通用户",
        },
      ],
    };
  },
  //   使用生命周期函数 created 在组件创建成功后执行
  //   生命周期函数相当于公共空间不要写太多的逻辑代码
  created() {
    // 调用函数
    this.getData();
  },
  methods: {
    // 跳转添加等级页面
    goPage(){
      this.$router.push("/level/add");
    },
    // 定义一个函数 用来获取数据
    getData() {
      // 发送请求
      // axios({}).then(()=>{}).catch(()=>{});
      axios({
        // method请求方式
        method: "get",
        // url请求地址
        url: "http://39.105.160.25:18080/levelController/getLevel",
      })
        .then((res) => {
          console.log(res.data.data.records);
          this.tableData = res.data.data.records;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 编辑按钮事件
    handleEdit(index, row) {
      console.log(index, row);
      this.$router.push({
        name:"LevelAdd",
        query:{
          id:row.jrid,
          name:row.levelname
        }
      });

    },
    // 删除按钮事件
    handleDelete(index, row) {
      // 删除等级
      axios({
        method:"delete",
        url:"http://39.105.160.25:18080/levelController/deleteLevel",
        data:[row.jrid]
      }).then(()=>{
        // 调用函数
        this.getData();
      }).catch(()=>{
      })
      console.log(index, row);
    },
  },
};
</script>

<!-- scoped 表示当前样式只作用于当前组件 -->
<style scoped>
.level-list {
  padding: 30px;
}
.del-btn{
  margin-left: 10px;
}
</style>