需求是el-tree 的子级 需要在:
加载子级数据并渲染dom结构。
需求1 还是比较好做的,官方有实例说明;
需求2 的话,翻了下element ui的源码,
checkBox上直接加了@click.native.stop T^T
也就是说点击checkBox的时候根本不会触发loadNode 这个方法
没办法只能去找手动触发的方法了,翻了一遍果然有!!!
node.loadData() 就是这个,具体的看下面代码吧:
<template>
<el-tree
:data="dataList"
show-checkbox
node-key="code"
ref="treeId"
@check="getKeys"
:expand-on-click-node="true"
:load="loadNode"
:lazy="lazy"
>
</el-tree>
</template>
<script>
export default {
props: {
// el-tree 的最外层(第一级)数据传入
dataList: {
type: Array,
default: () => {
return [];
}
}
},
methods: {
// 请求返回子级数据,在loadNode 方法里调用
async getChildren(data) {
...获取并返回子节点数据
},
// 下面方式是你在勾选复选框时也需要加载子级数据时调用,勾选时不需要加载渲染的话就忽略此方法
async getKeys(data) {
// 获取当前node节点
let node = this.$refs.treeId.getNode(data.code);
// 这个判断条件是楼主自己的需求,可根据实际情况自行调整
if (
node.level === 1 &&
!node.isLeaf &&
(!node.childNodes || !node.childNodes.length)
) {
await node.loadData(); // 触发当前勾选节点的loadNode 方法
}
... 勾选过后的其他操作
},
// 懒加载子节点数据,且如果父节点选中状态时,重新勾选节点(el-tree会因为新增了子节点,自己取消勾选)
// !!!这里处理请求子级数据并根据返回数据渲染el-tree的dom树
async loadNode(node, resolve) {
let data = node.data;
let checked = node.checked;
if (node.level === 1 && !data.children) {
let res = await this.getChildren();
resolve(res || []);
if (checked) {
this.$refs.treeId.setChecked(data.code, true, true);
this.getKeys(); // 如果在勾选之后有其他操作,需要再次执行一遍才有效果(踩过坑)
}
}
}
}
};
</script>
上面就是我找到的解决方案了,如果有小伙伴有更好的方法,欢迎来交流~