el-table实现多选删除

1.新增一列多选列

<el-table-column  type="selection"  width="55" />

2.给el-table绑定点击事件

    <el-table
      border
      stripe
      v-loading="listLoading"
      :data="users"
      @selection-change="handleSelectionChange"
    >

3.书写点击事件

//  这里的selection是你所有选择的项
handleSelectionChange(selection) {
  this.selectedIds = selection.map((item) => item.id);
  console.log(selection);
},

4.在data内手机所有的id

 selectedIds: [], // 所有选择的user的id的数组

5.给多选删除绑定事件

<el-button
  type="danger"
  @click="revomveUsers"
  //这里是当里面的id为空，那么他就不能被选中
  :disabled="selectedIds.length === 0"
  >批量删除</el-button
>

6.书写点击事件,并发送请求

revomveUsers() {
  this.$confirm("确定删除吗?")
    .then(async () => {
      await this.$API.user.removeUsers(this.selectedIds);
      this.$message.success("删除成功");
      this.getUsers();
    })
    .catch(() => {
      this.$message.info("取消删除");
    });
},