<template>
<div class="deptTree">
<el-button
@click="test"
>测试
</el-button>
<!--根节点写死\子节点懒加载\手风琴模式-->
<el-tree
ref="tree"
show-checkbox
accordion
:load="handleLoad"
lazy
node-key="id"
:default-expanded-keys="[rootNode.id]"
:default-checked-keys="[]"
:props="defaultProps"
:expand-on-click-node="true"
:highlight-current="true"
:default-expand-all="false">
</el-tree>
</div>
</template>
<script>
export default {
name: "deptTree",
data(){
return {
defaultProps: {
children: 'children',
label: 'label'
},
content:'',
treeData:[],
rootKey:'00000002',
rootNode : {
id : "00000002",
label : "海尔集团"
},
checkedKeys : []
}
},
methods: {
/**
* 根节点写死子节点懒加载
*/
handleLoad(node, resolve) {
// 懒加载先保存当前选中的节点key, 展开后再设置一遍解决展开某选中节点后选中被取消的问题
if(this.$refs.tree!=undefined) this.checkedKeys = this.$refs.tree.getCheckedKeys();
if (node.level == 0) {
return resolve([this.rootNode]);
} else {
var children = [
{
id : "00000003",
label : "子节点1"
},
{
id : "00000004",
label : "子节点2"
},
{
id : "00000005",
label : "子节点3"
}
];
resolve(children);
}
if(this.$refs.tree!=undefined) this.$refs.tree.setCheckedKeys(this.checkedKeys);
},
test() {
var checkedKeys = this.$refs.tree.getCheckedKeys();
console.log(checkedKeys);
}
},
}
</script>
<style scoped lang="scss">
</style>
<style lang="scss">
</style>
懒加载树,父节点被勾选,子节点懒加载后也被勾选
最新推荐文章于 2024-03-06 11:15:19 发布