Vue el-table 关于多选删除

项目的一个需求需要实现多选删除。这里记录一下自己实现的方法。

1、获取多选选中行的数据

查了官网文档中有这样一个方法可以获取选中的数据

handleSelectionChange(val) {
    this.multipleSelection = val
    console.log('多选选中的行', this.multipleSelection)
},

Tips:点击某一行，选中改行前面复选框的方法

<el-table @row-click="checkViews" ref="NodeTable" :data="list"
                    @selection-change="handleSelectionChange">
// methods中
checkViews(row){
      this.ableCheck = true // 判断选中状态
      this.$refs.NodeTable.toggleRowSelection(row);
},

在删除按钮上绑定Alldelete这个方法，@click="Alldelete"

Alldelete() { // 多选删除
    if (this.ableCheck) {
    this.$confirm('确定删除?', '删除提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => { // 写一个循环逐条执行删除操作，这里的deleteNodeCode是调用的接口。
          for(let i = 0 ; i < this.multipleSelection.length; i++){
            console.log(this.multipleSelection[i].nodeCode)
            deleteNodeCode(this.multipleSelection[i].nodeCode)
          }
        }).then(() => {
              console.log(this.list)
              this.getList() //获取删除后的表格
              this.$message({
                type: 'success',
                message: '删除成功'
              })
          })
      } else {
        this.$confirm('请先选择表单', '删除提示', {
          confirmButtonText: '确定',
          type: 'warning'
        })
    }
}