element ui中提供了树形控件的懒加载,但这种树的懒加载只支持一级一级加载,例如对省-市-区-局
站进行懒加载,先加载省,再点击省后,懒加载市,一级一级请求。
这种方式并不支持初始化一部分树后,再后续加载子节点,例如需要对省市区-局站
进行异步加载,首先初始化省市区后,当点击区时,再懒加载局站,其代码实现如下:
<template>
<el-tree :data="treeData"
:props="defaultProps"
ref="tree"
node-key="id"
@node-click="handleNodeClick"
@node-expand="expandClick">
<template #default="{node, data}">
<span class="custom-tree-node">
<i v-if="data.loading" class="el-icon-loading"></i>
<span class="node-label">{{ node.label }}</span>
</span>
</template>
</el-tree>
</template>
<script>
export default {
name: "tree1",
data () {
return {
treeData: [{
id: 1,
label: '省',
children: [{
id: 11,
label: '市',
children: [{
id: 111,
label: '区',
children: []
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
mounted() {
// this.$refs.tree.getNode(1).expanded = true
// this.$refs.tree.getNode(11).expanded = true
// this.$refs.tree.getNode(111).isLeaf = false
this.treeDataDeal(this.treeData)
},
methods: {
// 树数据处理
treeDataDeal (treeData) {
treeData.forEach(item => {
if (!item.children || item.children.length <= 0) {
// 设置为非叶子节点
this.$refs.tree.getNode(item.id).isLeaf = false
}else {
// 默认展开子节点
this.$refs.tree.getNode(item.id).expanded = true
}
this.treeDataDeal(item.children)
})
},
// 点击节点
handleNodeClick(data) {
this.getData(data)
},
// 节点展开
expandClick (data) {
this.getData(data)
},
getData (data) {
if (data.label === '区' && data.children.length < 1) {
// 开启loading
this.$set(data, 'loading', true)
setTimeout(() => {
data.children = [
{
id: 1111,
label: '局站'
}
]
// 关闭loading
this.$set(data, 'loading', false)
}, 1800)
}
},
}
}
</script>
<style scoped>
</style>
加载效果图如下:
-
初始化局部树时(省市区)时:
-
当点击区时,懒加载局站:
-
加载局站后: