VUE+ElementUI对Table的多选进行批量操作（复选框勾选删除）完整功能实现_element table 表格批量操作

其实实现批量操作功能的重点在于如何取到索引值，之前懵懵懂懂不明白，想通了之后还是比较简单的。

ElementUI:选择多行数据时使用 Checkbox。当用户勾选目标信息时，会触发selection-change事件。

<el-button type="warning" @click="deleteSelectItem">批量删除</el-button>
<el-table
            ref="multipleTable"
            :data="searchlist"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="bianhao" label="" width="200">
            </el-table-column>
  </el-table>
1
2
3
4
5
6
7
8
9
10
11

在method中实现handleSelectionChange方法，val为选中的数据集合。其中， multipleSelection: [],需要在data（）中声明

  //获取多选的数据
    handleSelectionChange(val) {
      this.multipleSelection = val;//存储选中的数据
      console.log(val);
    },
1
2
3
4
5

实现deleteSelectItem方法（批量删除按钮点击触发）。

deleteSelectItem() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //遍历获得多选选中的index值
          this.multipleSelection.forEach((value, index) => {
            //遍历多选框获取的数据
            this.searchlist.forEach((v, i) => {
              //遍历数据表，任意一个属性值相同，则说明该数据被选中，其i则为索引值
              if (value.bianhao == v.bianhao) {
                this.searchlist.splice(i, 1);
              }
            });
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          console.log("删除成功");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

修改选中数据的某字段值与删除类似，找到索引号后进行操作，例如修改searchlist中选中项的状态。editSelectItem(state)中的state为需要改成的状态，比如说选中的项的状态全部改为正常那就editSelectItem(“正常”)。

editSelectItem(state) {
      this.$confirm("是否修改选中记录的状态?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //遍历获得多选选中的index值
          this.multipleSelection.forEach((value, index) => {
            //遍历多选框获取的数据
            this.searchlist.forEach((v, i) => {
              //遍历数据表，任意一个属性值相同，则说明该数据被选中，其i则为索引值
              if (value.goodinid == v.goodinid) {
                this.searchlist[i].state = state
              }
            })
          })
          this.$message({
            type: "success",
            message: "审核成功!",
          })
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22