需要加以下三个方法
@select="selectChange"
@select-all="selectAllChange"
@selection-change="selectionChangeHandler"
<el-table
ref="multiTable"
v-loading="crud.loading"
lazy
:load="getMenus"
:data="list"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
row-key="id"
@select="selectChange"
@select-all="selectAllChange"
@selection-change="selectionChangeHandler"
>
/**
* 用于树形表格多选，单选的封装
* @param selection
* @param row
*/
selectChange(selection, row) {
// 如果selection中存在row代表是选中，否则是取消选中
if (selection.find(val => { return this.getDataId(val) === this.getDataId(row) })) {
if (row.children) {//注意这里的children是后台返回数据的children字段
row.children.forEach(val => {
this.$refs.multiTable.toggleRowSelection(val, true)
selection.push(val)
if (val.children) {
this.selectChange(selection, val)
}
})
}
} else {
this.toggleRowSelection(selection, row)
}
},
/**
* 用于树形表格多选, 选中所有
* @param selection
*/
selectAllChange(selection) {
// 如果选中的数目与请求到的数目相同就选中子节点，否则就清空选中
if (selection && selection.length === this.list.length) {
selection.forEach(val => {
this.selectChange(selection, val)
})
} else {
this.$refs.multiTable.clearSelection()
}
},
// 选择改变
selectionChangeHandler(val) {
this.selections = val
this.unique(this.selections,'id')//这里有一个问题就是这样点选完之后，数据有重复，所以根据id手动去重，期待优化
},
/**
* 切换选中状态
* @param selection
* @param data
*/
toggleRowSelection(selection, data) {
if (data.children) {//注意这里的children也是后台返回数据的children字段
data.children.forEach(val => {
this.$refs.multiTable.toggleRowSelection(val, false)
if (val.children) {
this.toggleRowSelection(selection, val)
}
})
}
},
getDataId(data) {
return data['id']
},
//数组去重
unique(arr,i){
for(let i=0;i<arr.length;i++){
for(let j=i+1;j<arr.length;j++){
if(arr[i].id == arr[j].id){
arr.splice(j,1)
j--
}
}
}
}，
//列表树懒加载
getMenus(tree, treeNode, resolve) {
const params = { pid: tree.id }
setTimeout(() => {
crudMenu.getMenus(params).then(res => {
resolve(res.content)
})
}, 100)
},
