基于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 相关文章推荐
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
Vue指令指令大全
Feb 09 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
微信小程序点击滚动到指定位置的实现
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 上传文件大小限制
2009/07/05 PHP
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
简明json介绍
2008/09/28 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
详解Vue打包优化之code spliting
2018/04/09 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
Python生成随机数组的方法小结
2017/04/15 Python
python实现文件的分割与合并
2019/08/29 Python
python全局变量引用与修改过程解析
2020/01/07 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
实习教师自我鉴定
2013/09/27 职场文书
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
事业单位鉴定材料
2014/05/25 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
法律进社区活动总结
2015/05/07 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书