Vue-单行删除与批量删除

一、单行删除

<el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-edit"></el-button>
            <el-button
              @click="handleClick(scope.row)"
              type="text"
              size="small"
              icon="el-icon-delete"
            ></el-button>
          </template>
</el-table-column>

在对应的删除按钮添加事件scope.row保证选中当前行

export default {
  data() {
    const data = [];
    return {
          //删除记录的code
      deleteCode: []
    };
  },

methods: {
    //Table里的点击删除图标\
    async handleClick(row) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消！");
      }
      this.deleteCode.push(row.id);
	   //调用的删除接口
      const { data: res } = await this.$axios.delete(
        "/questionCheck/updateIsDelete/" + this.deleteCode,
        {
          data: this.deleteCode
        }
      );
      if (res.code != "SUCCESS") {
        return this.$message.error("删除信息失败！");
      }
      this.deleteCode = [];
    },
}

二、批量删除

<el-button @click="batchDeleteBuild(multipleSection)" plain>批量删除</el-button>

export default {
  data() {
    return {
	      //被选中的列表记录
	    multipleSection: [],
       };
   },

methods: {
       //批量删除选中数据方法
    async batchDeleteBuild() {
      //判断是否选择了数据
      if (this.multipleSection.length == 0) {
        alert("请选择要删除的数据");
        return;
      }
      //如果有选中的数据，那么弹出消息框
      const confirmDelete = await this.$confirm(
        "此操作会永久删除建筑信息，是否删除？",
        "提示",
        {
          confimrButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      //如果用户确认删除，则返回字符串confirm
      //如果用户取消删除，则返回字符串cancel
      if (confirmDelete !== "confirm") {
        return this.$message.info("已取消");
      }
      //将选中的数据推到deleteCode数组中
      for (var i = 0; i < this.multipleSection.length; i++) {
        var j = i;
        var id = this.multipleSection[j].id;
        this.deleteCode.push(id);
      }
      //删除deleteCode中的数据
      const { data: res } = await this.$axios.delete(
        "/question/DeleteQuestionBatch",
        {
          data: this.deleteCode
        }
      );
      if (res.code != "SUCCESS") {
        return this.$message.error("删除课程信息失败！");
      }
      this.deleteCode = [];
    },
}