ElementUi tree结构 懒加载使用
前言
这是官网原话： 由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。
其中在数据添加leaf: true，就证明该节点下没有子级。
一. html结构
data() {
return {
props: {
label: 'name',
children: 'zones',
isLeaf: 'leaf'
},
}
},二. 方法
因为tree懒加载会默认自动请求一次方法 下面是模拟请求数据来操作, node中我们可以获取当前点击tree结构的数据值，进行传值 。在实际开发中 请求接口时 肯定会有一个字段比如镇街id 如果当前请求接口没有传镇街id 后端返回的就是第一级数据 传了镇街id 就是返回当前镇街下的数据。
loadNode(node, resolve) {
let _this = this;
console.log('------node-----', node); // 获取点击tree结构数据
if (node.level === 0) {
_this.handlegettreeData(resolve);
}
if (node.level === 1) {
_this.handlegettreeData(resolve, node.data.id);
}
if (node.level > 1) return resolve([]);
},// 获取tree结构数据
handlegettreeData(resolve,zjid) {
console.log('----error-----', zjid);
// tree结构第一级数据
if (!zjid) {
let arr = [
{
name: '马池口镇',
id: '1'
},
{
name: '南口镇',
id: '2'
},
{
name: '白泉镇',
id: '3'
},
{
name: '白浮镇',
id: '4'
},
{
name: '大涨镇',
id: '5'
}
];
resolve(arr);
} else {
setTimeout(() => {
let arr = [
{
name: '村1',
id: '6'
},
{
name: '村2',
id: '7'
},
{
name: '村3',
id: '8'
},
{
name: '村4',
id: '9'
},
{
name: '村5',
id: '10'
}
];
resolve(arr);
}, 1000);
}
},我这里做的是模拟只有两层tree数据来做的，当你项目中不确定有几层数据时就要修改loadNode方法啦。
三. 不确定层数
loadNode(node, resolve) {
let _this = this;
console.log('------node-----', node); // 获取点击tree结构数据
if (node.level === 0) {
_this.handlegettreeData(resolve);
}
if (node.level > 1) {
_this.handlegettreeData(resolve, node.data.id);
}
},// 获取tree结构数据
handlegettreeData(resolve,zjid) {
console.log('----error-----', zjid);
// tree结构第一级数据
if (!zjid) {
let arr = [
{
name: '马池口镇',
id: '1'
},
{
name: '南口镇',
id: '2'
},
{
name: '白泉镇',
id: '3'
},
{
name: '白浮镇',
id: '4'
},
{
name: '大涨镇',
id: '5'
}
];
resolve(arr);
} else {
let arr = []; // 代表请求后端返回的数据
if(arr.length > 0) {
resolve(arr)
}else {
resolve([]);
}
}
},上面loadNode 方法在获取一级数据之后，根据当前点击tree数据里的值来进行请求 有我们就传值，后端就会根据值来对应返回数据。这时我们就要根据是否有值来操作resolve();这个构造函数。