项目中用到的Element UI tree组件,由于向后台请求回来的数据庞大,需要使用懒加载,就研究了下,总结代码如下
- template代码
<el-tree
:props="props"
ref="tree"
lazy
:load="loadNode"
node-key="id"
:expand-on-click-node="false"
@node-click="nodeClick"
:filter-node-method="filterNode">
<span class="tree-node" slot-scope="{ node, data }" :title="data.name">
<span>{{ data.code }}_{{ data.name }}</span>
</span>
</el-tree>
- script代码
/* 在data中定义
props: {
label: 'name',
children: 'child',
isLeaf: 'leaf'
}*/
loadNode(node, resolve) {
console.log(node)
// console.log(resolve)
if (node.level === 0) {
return resolve([{ name: '第一级', id: '1' }, { name: '第一级02', id: '2' }])
// 这里resolve的数据是后台给的,id用于之后点击发起请求时的参数
} else {
this.getTreeChild(node.data.id, resolve)
}
},
getTreeChild(id, resolve) {
console.log(id)
// 这里可以替换成向后台发起的请求修改data,为了演示我用的是写死的数据,获取到data后,resolve出去就好了
if (id === '1') {
const data = [{
name: '第二级',
code: '2222',
leaf: true,
child: []
}, {
name: '第二级02',
child: [],
id: '1'
}]
resolve(data)
} else {
const data = [{
name: '第二级33',
code: '3333',
leaf: true,
child: []
}, {
name: '第二级02333',
child: []
}]
resolve(data)
}
},
以上代码亲测有效
