关于 Element 组件的穿梭框的重构

博客地址:https://ainyi.com/57

前端的发展迅速,层出不穷。很多公司的项目,在使用框架很好能解决 UI 与数据状态同步的难题,但随着公司业务发展,数据量的庞大以及数据处理越来越复杂,官方组件也难以解决的同时,就不得不自己重写特定组件

公司里的系统确实业务越来越多,Leader 要求使用 vue 重构系统,当然也是一个一个页面地重构,防止新页面出错,旧页面有补救的方案。

多选省市级联动

在涉及到==多选省市级三级联动==的交互功能,关注点在于==多选==,这个词加上,业务就比普通的三级联动复杂太多太多了...

例如:

  1. 当点击省级并添加,过滤备选框的当前省级,同时在已选框的该省级的子级合并成一个省级
  2. 当点击市级并添加,过滤该省的这个市,同时在已选框该市级的子级合并成一个市级
  3. 当从已选框中移除数据,又要针对移除的数据是==省、市、级==分别在备选框新增这些数据
  4. 点击分仓自动联动下面的数据...
  5. 区域搜索... 又要涉及过滤、又要涉及当前子级
  6. ...

Element 官方组件目前(==18年==)明显对于这个需求没有响应的解决方案,遂只能自己重写组件

实现效果图:

同时点击分仓能联动下面的区域数据

介绍

  1. 实现省市区三级多选联动,点击当前省级或市级,出现对应的子级(市级或区级),多选只出现最后点击项的子级例如: 已选择:广东省广州市荔湾区 点击加入:广东省广州市 最后显示:广东省广州市 广州市已被选择,对应市级的子级区将不显示,只显示对应的市(并在备选框过滤该省下的这个市)

同理:选择广东省,也将下面已选择的所有的市或区合并成一个省级,只显示这个省级(并在备选框过滤这个省)

  1. 可任选一个省级、市级、区级,加入已选框,也可以在已选框中删除对应的区域(备选框自动过滤已选)
  2. 选择对应仓库,自动勾选仓库对应的省,取消就反选
  3. 选择同样地区,选择省级或市级,若该对象下面的子级(市级或区级)已有选择,就自动合并为一个父级(省级或市级)

设计

应用 Element 组件穿梭框的 css 样式

拆分组件:父组件包含仓库和省市区框

三个区域框和一个已选框相似,复用一个组件 transfer,放在省市区框父组件中

省级 transfer、市级 transfer、区级 transfer

数据

父组件从数据中获取省级数据传递到子组件 transfer 展示出来

当选中的某个省,则传递对应省级 id 到父组件,根据 id 查找对应的市级并过滤,并且使用 ref 控制市级的 transfer 组件的 father 属性,就是在市级 transfer 组件里也有对应的省级对象

多选情况,只保留最后选择的父级(省级/市级)查找出对应的子级(市级/区级)

市级和省级组件的 father 对象是 {id:"", text:""}

市级组件的 father 保存着省级的 id 和名称。

区级组件的 father 保存着省市的 id 和名称(以-分割,如:{id:"10001-100145815", text:"广东省-河源市"})

省市区都分别设置一个过滤数组,用来过滤已选的区域

  • 区域搜索 监听搜索框的值,重新获取区域数据,再通过 filter 筛选出搜索的数据
  • 点击添加进已选
  • 省级直接点击添加选中的省份,直接传递该省的对象进已选数组。并将选择的省级 id 添加进省级过滤数组。然后判断已选区域中是否有该省级一下的市级,有则删除,合并成一个省级,并在省级过滤数组删除掉这个市级 id
  • 市级点击添加选中的城市,选中的城市对象数组,遍历拼接上当前的 father 对象,最终保存的形式:{id: "10005-545132025515", text: "广东省-广州市"},也要判断当前市级下是否有对应的区级,有则合并,并在区级过滤数组删除这个区级 id
  • 区级点击添加选中的区域,拼接上当前的 father 对象,最终的保存的形式:{id:"10004-15613610-25156165156321", text:"广东省-河源市-龙川县"}

子组件 transfer 中区域数据 districtList 需要放在监听器里,当点击省级或市级,自动监听更新市级或区级的列表

  • 从已选中删除 选中已选区域的数据,传递到父组件,同样的道理,删除过滤数组对应的 id,并刷新对应的区域数据
  • 监听仓库与区域对应 找出选中仓库的对应省级 id,已选区域有该省则过滤,无则添加,当点击取消勾选的时候,也实时将已选区域中对应的省级删除掉

关键点

关键点是过滤数据,展示数据和总体数据分别保存在不同变量,另外分别保存用于过滤的数据的数组,一级一级地联动,移除、增加、搜索的数据展示

相关连接

github:https://github.com/Krryxa/my-transfer

数据量庞大的穿梭框重写

公司业务中数据量太大,由于测试环境只有 400+ 条数据,而线上环境达到 3000+ 数据量,不是一个级别,这么多数据放在 Element 的穿梭框组件,响应起来十分慢,没办法,只能重写

实现效果图

重写穿梭框组件,使其变成分页形式加载,具体改变的点有:

  1. 从接口获取的 3000+ 的数据,放在临时变量,以分页形式展示
  2. 渠道的搜索,做成在所有数据里搜索,不是在当前分页的数据里搜索,这样就不用在每个分页都搜索一次了。搜索后的结果也会自动分页。(全部数据和仅作展示的数据存放在不同变量)
  3. 为了优化全选的速度,全选只在当前页里的全选
  4. 穿梭框左右两个框的联动

关键点

  1. 分页形式,关键点判断临界点
  2. 搜索数据,监听 keyword 的变化,从全局数据搜索
  3. 分别两个过滤数据的数组(备选、已选)
  4. 子组件:两个框,将中间的左右箭头(加入已选和移除已选)放在父组件控制数据流动
  5. 数据流动:子备选框 -> 父组件 -> 子已选框 (移除已选相反)

啦啦啦~~~

博客地址:https://ainyi.com/57

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏牛客网

百度fex面经

怎么设计一个爬虫,怎么并行爬,遇到错误要怎么处理,怎么提高数据库存储性能,索引怎么建(索引忘了) 

15430
来自专栏FreeBuf

XSS挑战第一期Writeup

0×00起因 这期XSS挑战的起因是在阅读“Modern Web Application Firewalls Fingerprinting and By...

273100
来自专栏游戏开发那些事

【python游戏编程之旅】第九篇---嗷大喵快跑小游戏开发实例

本系列博客介绍以python+pygame库进行小游戏的开发。有写的不对之处还望各位海涵。

18710
来自专栏程序员互动联盟

C语言和C++本质区别在哪?

疑惑一 做网站前端开发需要具备哪些基础知识? 做网站开发分为前端和后台,如果从事前端开发需要学习哪些基础知识呢?现在为大家总结一下。 html: ...

45830
来自专栏ytkah

Unix时间戳转换怎样在Excel批量修改?

  最近在操作项目的时候碰到一个Unix时间戳转换的问题。"date_time":1393031347这个是什么,你知道吗?如果你对Unix时间戳了解的话一眼就...

412120
来自专栏即时通讯技术

微信团队原创分享:iOS版微信的内存监控系统技术实践

FOOM(Foreground Out Of Memory),是指App在前台因消耗内存过多引起系统强杀。对用户而言,表现跟crash一样。Facebook早在...

16620
来自专栏一场梦

将照片变成字母符号组成的文字软件

24750
来自专栏游戏杂谈

Unity 5.4版本 Application.systemLanguage 失效

上面这段代码看上面去没毛病是吧,可是市场的反馈说。为什么 iOS 和 安卓的转化率差了这么多。而且北美用户反馈怎么默认是中文啊?

15120
来自专栏freesan44

python 携程爬虫开发笔记

最近购买了《Python3 爬虫、数据清洗与可视化实战》,刚好适逢暑假,就尝试从携程页面对广州的周边游产品进行爬虫数据捕捉。 因为才学Python不够一个星期...

62910
来自专栏北京马哥教育

13个Python GUI库

Python是一门高级编程语言。它用于通用编程。Python语言由Guido van Rossum创建,并于1991年首次发布。Python的设计哲学着重于代码...

31700

扫码关注云+社区

领取腾讯云代金券