element-ui官方文档(官方文档)提供了懒加载自定义叶子节点,主要是通过resolve()来返回。
使用:
- 页面上先引入element ui相关js和css.
- el-tree基础用法:
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
<script>
export default {
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
}
};
</script>
对于数据不多的情况下可以后台直接组装这种格式返回,但由于我这边的物资编码数据量较大(六千多条),如果全部一次性返回会导致页面渲染时速度缓慢,影响体验。所以这边采用动态加载的方式实现,初始时只查询一级节点,之后每点击一次传此节点的id去查询它下面的节点。
- 实际应用
引入el-tree组件:设置相关属性
<!-- 搜索与筛选 -->
<div class="mysearch">
<div class="search-header row">
<div class="col-12 myfrom row">
<input type="search" placeholder="搜索物资设备服务编码/物资名称" class="col-10" v-model="searchParam">
<i
v-show="circle"
class