項(xiàng)目中用到的Element UI tree組件,由于向后臺(tái)請(qǐng)求回來(lái)的數(shù)據(jù)龐大,需要使用懶加載,就研究了下,總結(jié)代碼如下
- 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: '第一級(jí)', id: '1' }, { name: '第一級(jí)02', id: '2' }])
// 這里resolve的數(shù)據(jù)是后臺(tái)給的,id用于之后點(diǎn)擊發(fā)起請(qǐng)求時(shí)的參數(shù)
} else {
this.getTreeChild(node.data.id, resolve)
}
},
getTreeChild(id, resolve) {
console.log(id)
// 這里可以替換成向后臺(tái)發(fā)起的請(qǐng)求修改data,為了演示我用的是寫死的數(shù)據(jù),獲取到data后,resolve出去就好了
if (id === '1') {
const data = [{
name: '第二級(jí)',
code: '2222',
leaf: true,
child: []
}, {
name: '第二級(jí)02',
child: [],
id: '1'
}]
resolve(data)
} else {
const data = [{
name: '第二級(jí)33',
code: '3333',
leaf: true,
child: []
}, {
name: '第二級(jí)02333',
child: []
}]
resolve(data)
}
},
以上代碼親測(cè)有效
