Element UI实现单选多选，批量删除

1、添加一个批量删除的按钮

 <el-button 
        type="danger" 
        icon="el-icon-delete" 
        @click="delAll"  
        :disabled="multipleSelection.length === 0"   //判断用户是否点击选择
        style="margin-left:15px;" >
        一键删除
</el-button>

 

 如上图所示，当没有选中任何一项时，批量删除按钮是不可点击的，当选中其中一项或多项时，批量删除按钮变成可点击；

2、在el-table标签内添加点击复选框的事件和点击行的事件

    <el-table
      v-loading="listLoading"
      :data="datalist"
      @selection-change="handleSelectionChange"    //多选，当选择项发生变化时会触发该事件
      @row-click="handleRowClick"    //点击每行时触发事件
      ref="handSelectTest_multipleTable"  //添加属性
      row-key="id"
    >

 3、 手动添加一个el-table-column，设type属性为selection即可； 

 <el-table-column
         type = 'selection'
         label="全选"
         width="55"
         :reserve-selection="true">  //选择其他页时，之前页选的的框依然存在
  </el-table-column>

如果要获取不同页的数据进行操作，利用reserve-selection，这在官方文档中有说明

需要注意的是使用reserve-selection属性必须配合row-key（不然会报错）

4、 最后在方法中添加点击复选框、点击行和根据id批量删除的方法

  methods: {
      //点击复选框触发，复选框样式的改变
    handleSelectionChange(val) {
        console.log(val)  //打印选中的行集合
        this.multipleSelection = val;
    },
    //点击行触发，选中或不选中复选框
   	handleRowClick(row, column, event) {
        this.$refs.handSelectTest_multipleTable.toggleRowSelection(row);
        console.log(row)  //打印的时当前选中的行
    },
    //点击批量删除
    delAll(){
      var arr=[]
      //遍历点击选择的对象集合，拿到每一个对象的id添加到新的集合中
      this.multipleSelection.forEach(row=>arr.push(row.id))
      this.$confirm('确定删除吗', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        callback: action => {
          if (action === 'confirm') {
            //批量删除
            delAllIpserver(arr).then(response => {
              this.$notify({
                title: '删除成功',
                message: '',
                type: 'success',
                duration: 2000
              })
              this.getList()  //重新加载页面的方法
            }).catch(() => {
              console.log('error submit')
            })
          }
        }
      })
    } 
  }

 效果图