专栏首页Krryblog关于 Element 组件的穿梭框的重构
原创

关于 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 条评论
登录 后参与评论

相关文章

  • 多选穿梭框总结 (vue + element)

    Krry
  • Vue 开发技巧总结

    v-model 是 Vue 提供的一个语法糖,它本质上是由 value 属性 + input 事件组成的(都是原生的默认属性)

    Krry
  • SSM 使用 mybatis 分页插件 pagehepler 实现分页

    前几天在这里分享了手写 sql 分页查询实现分页,现在来看看使用 mybatis 分页插件 pagehepler 来实现分页

    Krry
  • Blazor带我重玩前端(五)

    本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第一篇,后续会有第二篇。

    Edison.Ma
  • MySQL replace into导致的自增id问题

    今天线上遇到一个问题,挺有意思,这里记录一下希望对大家有所帮助。某个表中,只有一条记录,发生高可用切换之后,自增id的值发生了变化,主从的自增id值不一...

    AsiaYe
  • 微信开发本地服务器映射外网服务器步骤顺序

    1.这里推荐 http://ngrok.ciqiuwl.cn/  可以使用,ngrok官网的连接失败,据说是被墙了 2.在微信平台把相关信息填写好,暂时不提交(...

    蓓蕾心晴
  • 【MatConvnet速成】MatConvnet图像分类从模型自定义到测试

    不同于各类深度学习框架广泛使用的语言Python,MatConvnet是用matlab作为接口语言的开源深度学习库,底层语言是cuda。

    用户1508658
  • 小程序在父组件执行子组件方法,可适用于下拉刷新上拉加载之后执行子组件方法

    当父组件引用了子组件的时候,会遇到父组件执行子组件的方法,比如下拉刷新上拉加载等事件只有在页面中才能检测到,但是获取数据的方法在子组件,这时就可以执行子组件方法...

    蓓蕾心晴
  • 做测试计划需要考虑的方方面面

    【本文系google blog翻译】 如何做测试计划书,并能有理有力的推动测试计划实施?三星手机连爆事件警醒我们质量是企业头上的一把刀,也是测试工程师头上的一...

    腾讯移动品质中心TMQ
  • 王者荣耀有罪吗?用这款小程序,亮出你的态度

    除了亲儿子腾讯投票,以及它的挑战者投票帮。今天,知晓程序(微信号 zxcx0101)还要给大家介绍一款专门的投票小程序。

    知晓君

扫码关注云+社区

领取腾讯云代金券