// 使用check-change判断勾选状态
<el-tree
element-loading-spinner="el-icon-loading"
:data="treeData"
node-key="id"
:load="loadTree"
ref="orgTrees"
lazy
:props="treeProps"
:show-checkbox="true"
:default-expanded-keys="defaultExpanded"
@check-change="checkChange"
@node-click="nodeClick">
<span slot-scope="{node}">
</el-tree>
方法:
loadTree(node, resolve){
// 懒加载树形数据
resolve(nodeData)
// 如果选中
if(node.checked) {
this.$refs.orgTrees.setChecked(node.data.orgId, true, true)
this.defaultExpanded.push(node.data.orgId)
this.pushCheckBox(node)
}
},
/** 组织机构多选勾选状态发生变化时
* val: 数组中节点对应的对象
* val2: 节点本身是否被选中
* val3: 节点子树中是否有被选中的节点
*/
checkChange(val, val2, val3){
if(val2) {
let node = this.$refs.orgTrees.getNode(val)
if(node.isLeaf) {
// 子节点时 todoList
}else{
// 选中的不是子节点,则手动触发加载该节点下的子节点
node.loadData()
}
}else{
// todoList
},
// 递归添加选中节点(多选)
pushCheckBox(node) {
if(node.isLeaf) {
// todoList
return
}else{
// 不是子节点,则如果该节点还没加载子节点,则请求接口加载,有子节点遍历子节点
if(node.childNodes && node.childNodes.length > 0) {
node.childNodes.forEach(item => {
item.loadData()
})
}
}
},