el-table @selection-change实现多选框的效果以及可以进行批量删除的操作

2023.2.2今天我学习了如何在表格中添加多选框并且可以进行多选的效果，以及可以进行批量删除的操作。

效果：

没选中时

多选但不全选 

 

全选 

 

 html代码如下：

// @selection-change="handleSelectionChange"实现多选框的方法

 <el-table
      @selection-change="handleSelectionChange">

// type="selection" 设置多选框 把type类型设置为selection为多选框

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

//:disabled="multiple"设置没有选中框时的禁用状态，在data里面默认为true（禁用）
 <el-button
        type="danger"
        plain
        icon="el-icon-delete"
        size="mini"
        :disabled="multiple"
        @click="handleDeleteArr"
      >删除
 </el-button>

js代码如下：

 // 多选框选中数据
    handleSelectionChange(selection) {
    //selection拿到当前的选中数据
    console.log(selection)    //选中的数据 
 
     /**让data里面的默认的multiple(true)不等于选中的长度，
     这样可以触发取消禁用的效果（也就是可以进行删除了）**/
     this.multiple = !selection.length
     console.log(this.multiple)  //fasle


     //可以使用map遍历数组拿到需要的值进行删除
     let dict_code_arr = selection.map(item => (item.变量名))

     /**拿到多选的长度，data里面的selected_num = []
     主要用于提示框的文字说明，比如可以知道当前删除了几个数据**/
     this.selected_num = dict_code_arr.length

     //join用于截取字符串，传到接口的时候需要使用
     let dict_code = dict_code_arr.join(',')
     console.log(dict_code_arr) // 1 2 3
     console.log(dict_code) // 1,2,3

     this.dict_code = dict_code
} 


 // 实现批量删除的方法
    handleDeleteArr(){

    //连接删除的接口
    delete(this.dict_code).then(res=>{
     if(res.code == 200){
     this.$message({
       message: '删除成功！',
       type: 'success'
  })   
}
   })
}