基于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 面向对象全新理练之数据的封装
Dec 03 Javascript
Javascript 面向对象 重载
May 13 Javascript
一段批量给页面上的控件赋值js
Jun 19 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
谈谈对offsetleft兼容性的理解
Nov 11 Javascript
js实现3D图片展示效果
Mar 09 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
vue的安装及element组件的安装方法
Mar 09 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 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
ajax缓存问题解决途径
2006/12/06 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
Yii框架安装简明教程
2020/05/15 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
jquery 表单取值常用代码
2009/12/22 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
div层的移动及性能优化
2010/11/16 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
vue多次循环操作示例
2019/02/08 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
Python中DJANGO简单测试实例
2015/05/11 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
微信公众号token验证失败解决方案
2019/07/22 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
升国旗仪式主持词
2014/03/19 职场文书
环保专项行动方案
2014/05/12 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
三八节活动主持词
2015/07/04 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python