关于 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