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'
})
}
})
}