<el-table
:data="tableData"
ref="multipleTable"
style="width: 100%"
height="100%"
row-key="id"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
@select="selectTr"
@select-all="selectAll"
border>
<el-table-column type="selection" width="56"></el-table-column>
<el-table-column prop="name" label="任务"></el-table-column>
<el-table-column prop="product" label="制作人"></el-table-column>
</el-table>
数据里面添加一个判断符
data(){
return{
isAllSelect:false
}
},
然后就是方法部分
methods:{
// 全选/取消选操作
selectAll() {
this.isAllSelect = !this.isAllSelect;
let data = this.tableData;
this.toggleSelect(data,this.isAllSelect,'all');
},
//选择某行
selectTr(selection,row){
this.$set(row,'isChecked',!row.isChecked);
this.$nextTick(()=>{
this.isAllSelect = row.isChecked;
this.toggleSelect(row,row.isChecked,'tr');
});
},
//递归子级
toggleSelect(data,flag,type){
if(type === 'all'){
if(data.length > 0){
data.forEach(item=>{
this.toggleSelection(item, flag);
if(item.children && item.children.length > 0){
this.toggleSelect(item.children,flag,type)
}
})
}
}else {
if(data.children && data.children.length > 0){
data.children.forEach(item =>{
item.isChecked = !item.isChecked;
this.$refs.multipleTable.toggleRowSelection(item, flag);
this.toggleSelect(item,flag,type);
})
}
}
},
//改变选中
toggleSelection(row, flag) {
this.$set(row,'isChecked',flag);
this.$nextTick(()=>{
if (flag) {
this.$refs.multipleTable.toggleRowSelection(row, flag);
} else {
this.$refs.multipleTable.clearSelection();
}
});
}
}