基于elementui|基于elementui tree控件点击节点进行异步加载（按需加载）基于elementuitree控件点击节点进

【基于elementui|基于elementui tree控件点击节点进行异步加载（按需加载）】 1.引入

2.注册数据

props: { label: "regionName",//这里是树结构中需显示的数据（即接口返回的需展示在页面上的参数） children: [], isLeaf: "leaf" }

3.注册方法

handleNodeClick(data) { console.log("node", data); }, // 异步树叶子节点懒加载逻辑 loadNode(node, resolve) { console.log(node); console.log(resolve); // 一级节点处理 if (node.level === 0) { this.requestTree(resolve); } // 其余节点处理 if (node.level >= 1) { // 注意！把resolve传到你自己的异步中去 this.getIndex(node, resolve); } }, // 异步加载叶子节点数据函数 getIndex(node, resolve) { var param = { code: "002", provinceId: node.data.regionCode }; var url = "/base/inter"; this.$ajax .post(url, param) .then(out => { console.log(out.data.data); // 此处需要后台传过来一个值来判断每个节点有无子节点,实际项目中必须加上（如isRealLeaf），不传都默认为叶子节点 //out.data.data.forEach(value => { //if (value.isRealLeaf === 'Y') { //value.leaf = true//不为叶子节点 //} else { //value.leaf = false//为叶子节点 //} // }) let data = https://www.it610.com/article/out.data.data; resolve(data); }) .catch(error => {}); }, // 首次加载一级节点数据函数 requestTree(resolve) { var param = { code: "001" }; var url = "/base/inter"; this.$ajax .post(url, param) .then(out => { console.log(out.data.data); // 此处需要后台传过来一个值来判断每个节点有无子节点,实际项目中必须加上（如isRealLeaf），不传都默认为叶子节点 //out.data.data.forEach(value => { //if (value.isRealLeaf === 'Y') { //value.leaf = true//不为叶子节点 //} else { //value.leaf = false//为叶子节点 //} // }) let data = https://www.it610.com/article/out.data.data; resolve(data); }) .catch(error => {}); }

4.关于后台返回数据的注意点：需返回一个判断该节点有无子节点的参数。
来源于element UI tree 控件，点击父节点进行异步加载中的一条评论，亲试有效