引⾔
最近开发项⽬时遇到⼀个需求就是采⽤tree的⽅式展⽰以万为单位的数据，因为数据量⼤第⼀反应就是采⽤“懒加载”的⽅式实现，为了⽅便⽤户在庞⼤的数据量中快速定位到某个节点搜索功能也是必不可少的；因为采⽤“懒加载”数据，搜索当然也是远程搜索了；确定了需求当然第⼀时间就去⽹上有没有⼩伙伴已经实现了相关组件，最后....，还是⾃⼰实现⼀个吧（由于公司采⽤的element-ui所以基于el-tree进⾏改造）；【这只是⾃⼰实现的⼀种思路，希望⼤家多多指正】
1.懒加载树的实现
刚开始准备直接采⽤el-tree⾃带的懒加载⽅式，但在实现过程中发现el-tree采⽤懒加载后没有展开树节点，这显然⾏不通；思来想去懒加载不就是展开节点时再去加载数据吗，我采⽤⾮lazy的形式⾃⼰控制就⾏了啊，于是有了下⾯的实现：
// 数据格式要求
const treeData = [
{
阿娇老公赖弘国身价label: '节点1',
id: '1',
children: [] // 为了显⽰展开的⼩箭头凡是有⼦节点就需要带上
},
{
label: '节点2',
id: '2'
}
]
在拿到上⾯的数据后我会对数据进⾏⼀些处理来实现展开时加载⼦节点数据，具体如下：
// 执⾏后数据变成下⾯的形式
const treeData = [
{
label: '节点1',
id: '1',
children: [啜妮个人资料
// 渲染节点时通过_state_来标识显⽰加载状态，如果⽹络中断加载失败
//_state_ = 1，可点击重新加载再次索要数据，不⽤关闭节点再展开去加载
祝福毕业生前程似锦句子// 之所以都加载id，是为了给el-tree添加node-key，⽅便树的操作使⽤，具体见elementUI⽂档乔迁贺词
{id: '1-test', '_state_': 0}
] // 为了显⽰展开的⼩箭头凡是有⼦节点就需要带上
},
{三月你好文案
label: '节点2',
id: '2'
网上代理}
]
数据插⼊
在展开节点时获取数据，然后获取到展开点插⼊便是，el-tree提供了对应⽅法；
到这⾥懒加载树基本上就做好了
2.远程搜索实现
远程搜索框主要采⽤了el-select的远程搜索功能，这⾥就不赘述了，主要介绍更具搜索选中的id获取的数据的和插⼊树节点⽅式：
要求数据格式
const nodeData = {
label: '节点1', // 最上层节点
id: '1',
children: [
{label: '节点1-1', id: '1-1', chilrend: []},
{label: '节点1-2', id: '1-2', chilrend:[]} // 搜索对应id的节点
]
}
返回的数据就是你要获取的节点id的兄弟节点及⽗节点的所有兄弟节点依次类推，直到这个节点分⽀的的根节点；听起来有点绕，但是你可以脑补⼀下你展开这个节点后所有⾯上的节点你都是要有的；
将数据插⼊树中
这段代⾸先会将数据和本地数据进⾏对⽐合并（刚开始设计时没有合并，采⽤直接替换的⽅式，因为需要基于这个树实现下拉选择组件【如果对下拉树组件感兴趣可以留⾔，我给⼤家分享下我的思路，相对⽽⾔⽐这个组件的封装复杂度要⾼⼀些】，并⽀持多选有默认值设置问题，才改为合并处理的⽅式；对⽐合并并不需要太多时间执⾏，因为新数据只会有⼀个节点与本地数据不同，所以还是很快的），然后到本地需要插⼊数据的节点，执⾏插⼊即可；
3.效果图展⽰
结语
这只是我个⼈对业务的⼀种解决⽅式，存在的不⾜还希望⼤家多指正；同时也希望得到⼤家的⿎励，让我在前端的道路上继续努⼒进步:grinning:。
参考链接
到此这篇关于基于element-ui封装可搜索的懒加载tree组件的实现的⽂章就介绍到这了，更多相关element 可搜索懒加载tree内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
发布评论