一 业务场景:树数据量过大
二 解决方案:
1.异步加载
2.手风琴模式
3.保存已加载的选中的节点keys(未加载的子节点不保存),页面初始化时设置选中的keys
4.匹配时根据节点的绝对路径进行匹配
三 代码
1.created方法中设置this.checkedKeys即可在页面初始化时加载节点的选中状态
2.使用json数据模拟ajax请求,实际开发中将json数据替换为ajax返回值并用js方法将业务数据处理成节点数据
@click=”test”
>测试
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”>
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);
}
},
}
四
1.吐槽下element ui的官方文档对于懒加载的只言片语给实现带来了很多困难
2.懒加载树绑定data貌似取不出数据