html
<el-tree :props="props" :load="loadNode" lazy show-checkbox @node-collapse="handleNodeClick"> </el-tree>
data() {
return {
props: {
label: 'name',
children: 'zones',
isLeaf: 'leaf'
},
node_had: [], // 触发 tree 的 :load=loadNode 重复触发 动态更新tree
resolve_had: [], // 触发 tree 的 :load=loadNode 重复触发 动态更新tree
}
}
方案一
loadNode(node, resolve) {
if (node.level === 0) {
this.node_had = node; //这里是关键!在data里面定义一个变量,将node.level == 0的node存起来
this.resolve_had = resolve; //同上,把node.level == 0的resolve也存起来
return resolve([{ name: 'region' }]);
}
// 其余节点处理
if (node.level >= 1) {
// 异步获取数据
setTimeout(() => {
const data = [
{
name: 'leaf',
leaf: true
},
{
name: 'zone'
}
];
resolve(data);
}, 500);
}
},
// 触发 tree 的 :load=loadNode 重复触发 动态更新tree
requestNewData() {
this.node_had.childNodes = []; //把存起来的node的子节点清空,不然会界面会出现重复树!
this.loadNode(this.node_had, this.resolve_had); //再次执行懒加载的方法
},
// 点击 按钮时 显示tree 时候 触发 函数 重新渲染tree
handleNodeClick() {
this.requestNewData(this.node_had, this.resolve_had);
}
方案二
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ name: 'region' }]);
}
// 其余节点处理
if (node.level >= 1) {
// 异步获取数据
setTimeout(() => {
const data = [
{
name: 'leaf',
leaf: true
},
{
name: 'zone'
}
];
resolve(data);
}, 500);
}
},
// 点击 按钮时 显示tree 时候 触发 函数 重新渲染tree
handleNodeClick(data, node) {
node.loaded = false
node.childNodes.splice(0, node.childNodes.length)
}