基于element-ui封装可搜索的懒加载tree组件的实现


Posted in Javascript onMay 22, 2020

引言

最近开发项目时遇到一个需求就是采用tree的方式展示以万为单位的数据,因为数据量大第一反应就是采用“懒加载”的方式实现,为了方便用户在庞大的数据量中快速定位到某个节点搜索功能也是必不可少的;因为采用“懒加载”数据,搜索当然也是远程搜索了;确定了需求当然第一时间就去网上找有没有小伙伴已经实现了相关组件,最后....,还是自己实现一个吧(由于公司采用的element-ui所以基于el-tree进行改造);【这只是自己实现的一种思路,希望大家多多指正】

1.懒加载树的实现

刚开始准备直接采用el-tree自带的懒加载方式,但在实现过程中发现el-tree采用懒加载后没有展开树节点,这显然行不通;思来想去懒加载不就是展开节点时再去加载数据吗,我采用非lazy的形式自己控制就行了啊,于是有了下面的实现:

// 数据格式要求
const treeData = [
 {
  label: '节点1',
  id: '1',
  children: [] // 为了显示展开的小箭头凡是有子节点就需要带上 
 },
 {
  label: '节点2',
  id: '2'
 }
]

在拿到上面的数据后我会对数据进行一些处理来实现展开时加载子节点数据,具体如下:

基于element-ui封装可搜索的懒加载tree组件的实现

基于element-ui封装可搜索的懒加载tree组件的实现

// 执行后数据变成下面的形式
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'
 }
]

数据插入

基于element-ui封装可搜索的懒加载tree组件的实现

在展开节点时获取数据,然后获取到展开点插入便是,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的兄弟节点及父节点的所有兄弟节点依次类推,直到这个节点分支的的根节点;听起来有点绕,但是你可以脑补一下你展开这个节点后所有面上的节点你都是要有的;

将数据插入树中

基于element-ui封装可搜索的懒加载tree组件的实现

这段代首先会将数据和本地数据进行对比合并(刚开始设计时没有合并,采用直接替换的方式,因为需要基于这个树实现下拉选择组件【如果对下拉树组件感兴趣可以留言,我给大家分享下我的思路,相对而言比这个组件的封装复杂度要高一些】,并支持多选有默认值设置问题,才改为合并处理的方式;对比合并并不需要太多时间执行,因为新数据只会有一个节点与本地数据不同,所以还是很快的),然后找到本地需要插入数据的节点,执行插入即可;

3.效果图展示

基于element-ui封装可搜索的懒加载tree组件的实现

结语

这只是我个人对业务的一种解决方式,存在的不足还希望大家多指正;同时也希望得到大家的鼓励,让我在前端的道路上继续努力进步:grinning:。

参考链接

Vue

element-ui

到此这篇关于基于element-ui封装可搜索的懒加载tree组件的实现的文章就介绍到这了,更多相关element 可搜索懒加载tree内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
IE下使用cloneNode注意事项分享
Nov 22 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
js querySelector() 使用方法
Dec 21 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
微信小程序点击滚动到指定位置的实现
May 22 #Javascript
使用JavaScript通过前端发送电子邮件
May 22 #Javascript
uni-app微信小程序登录授权的实现
May 22 #Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 #jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 #jQuery
uni-app使用微信小程序云函数的步骤示例
May 22 #Javascript
AutoJs实现刷宝短视频的思路详解
May 22 #Javascript
You might like
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
jQuery live
2009/05/15 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
Python中运行并行任务技巧
2015/02/26 Python
python传递参数方式小结
2015/04/17 Python
Python读写配置文件的方法
2015/06/03 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
python list格式数据excel导出方法
2018/10/31 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
Python urlencode和unquote函数使用实例解析
2020/03/31 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
营销总经理的岗位职责
2013/12/15 职场文书
医师定期考核实施方案
2014/05/07 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
淘宝客服工作职责
2014/07/11 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
在python中实现导入一个需要传参的模块
2021/05/12 Python
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang