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 = [];
    },
}