基于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 23 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
js调试系列 初识控制台
Jun 18 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
js图片无缝滚动插件使用详解
May 26 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 归并排序 数组交集
2011/05/10 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
PHP实现文件下载详解
2014/11/27 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
在Python中使用SQLite的简单教程
2015/04/29 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
Python使用folium excel绘制point
2019/01/03 Python
python 图片去噪的方法示例
2019/07/09 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
PyQt实现计数器的方法示例
2021/01/18 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
施工安全员岗位职责
2015/04/11 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android