elementUI中table表格添加⼀列多选框（vue）
效果图如下：
在elementUI中使⽤多选框checkbox在表格中有两种⽅法，第⼀种就像上图中第⼀列多选框⼀样，只需在elementUI中table的⼀列设置⼀
个属性type="selection"即可，如下：
<el-table
:data="tableData"
:current-page.sync="currentPage"
@selection-change="handleSelectionChange"
class="" ref="taskTable">
<el-table-column
type="selection"
width="55">
</el-table-column>
</el-table>
但是单独的⼀列多选框需要和这列多选框进⾏区分，所以需要单独设置如下：
<el-table-column width="55" label="是否删除" >
<template slot-scope="scope">
<el-checkbox v-model="tableData[scope.$index].isDelete"  @change="selectRadio(scope.$w)" :disabled="tableData[scope.$index].disabled">  </template>
</el-table-column>
也就是上图红⾊框的范围区域多选框，因为是和vue⼀起写的，所以适应v-model进⾏绑定，数据和多选框勾选⽅法展⽰如下：
data(){
return:{
tableData:[]
}
},
method:(){
//多选框选中⽅法
selectRadio(index,row){
},
//获取数据的⽅法
getData () {
axios.post('/admin/decops/getTasks', {
vue element admincurrentPage:this.currentPage,
pagesize:this.pagesize,
filter:this.formOne
}).then(res => {
this.tableData = res.data.tasks;
this.formDataOne = res.data.selData;
var Arr = this.tableData;
})
},
//给表格数据添加⼀列默认多选框的选中值数据
getAdd(arr){
var that = this;
arr.forEach(function(item,index,array){
that.$set(arr[index],'isDelete',false)
});
return arr
},
}
使⽤$set⽅法向接⼝返回的表格数据中添加⼀个属性isDelete，从⽽实现进⾏数组数据刷新，使得页⾯展⽰刷新。如下
但是这是有了⼀个问题，就是我点击第⼀列多选框选中的时候，修改是否删除这⼀列，第⼀列多选框框中的数据不会改变，为了防⽌数据传递错误，我想了⼀个⽅法，当选中第⼀列多选框的时候，使得是否删除这⼀列的多选框⽆法选中，实现⽅法如下：
// 第⼀列多选框选中事件
handleSelectionChange(val) {
this.multipleSelection = val;
if(val.length == 0){
this.updateDisable(this.tableData);
}else{
this.updateDisable(this.tableData,true);
}
},
//是否禁⽤多选框
updateDisable(Arr,type){
var that = this;
if(type){
Arr.forEach(function(item,index,array){
that.$set(Arr[index],'disabled',type)
});
}else{
Arr.forEach(function(item,index,array){
that.$set(Arr[index],'disabled',false)
});
}
return Arr
}
给表格数据每⼀列多选框增加⼀个disabled属性，通过第⼀列的勾选事件进⾏控制传递值type，从⽽进⾏控制是否删除这⼀列多选框是否禁⽤。
效果图如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。