博客地址:https://ainyi.com/57
前端的发展迅速,层出不穷。很多公司的项目,在使用框架很好能解决 UI 与数据状态同步的难题,但随着公司业务发展,数据量的庞大以及数据处理越来越复杂,官方组件也难以解决的同时,就不得不自己重写特定组件
公司里的系统确实业务越来越多,Leader 要求使用 vue 重构系统,当然也是一个一个页面地重构,防止新页面出错,旧页面有补救的方案。
在涉及到==多选省市级三级联动==的交互功能,关注点在于==多选==,这个词加上,业务就比普通的三级联动复杂太多太多了...
例如:
Element 官方组件目前(==18年==)明显对于这个需求没有响应的解决方案,遂只能自己重写组件
同时点击分仓能联动下面的区域数据
同理:选择广东省,也将下面已选择的所有的市或区合并成一个省级,只显示这个省级(并在备选框过滤这个省)
应用 Element 组件穿梭框的 css 样式
拆分组件:父组件包含仓库和省市区框
三个区域框和一个已选框相似,复用一个组件 transfer,放在省市区框父组件中
省级 transfer、市级 transfer、区级 transfer
父组件从数据中获取省级数据传递到子组件 transfer 展示出来
当选中的某个省,则传递对应省级 id 到父组件,根据 id 查找对应的市级并过滤,并且使用 ref 控制市级的 transfer 组件的 father 属性,就是在市级 transfer 组件里也有对应的省级对象
多选情况,只保留最后选择的父级(省级/市级)查找出对应的子级(市级/区级)
市级和省级组件的 father 对象是 {id:"", text:""}
市级组件的 father 保存着省级的 id 和名称。
区级组件的 father 保存着省市的 id 和名称(以-分割,如:{id:"10001-100145815", text:"广东省-河源市"})
省市区都分别设置一个过滤数组,用来过滤已选的区域
子组件 transfer 中区域数据 districtList 需要放在监听器里,当点击省级或市级,自动监听更新市级或区级的列表
关键点是过滤数据,展示数据和总体数据分别保存在不同变量,另外分别保存用于过滤的数据的数组,一级一级地联动,移除、增加、搜索的数据展示
相关连接
github:https://github.com/Krryxa/my-transfer
公司业务中数据量太大,由于测试环境只有 400+ 条数据,而线上环境达到 3000+ 数据量,不是一个级别,这么多数据放在 Element 的穿梭框组件,响应起来十分慢,没办法,只能重写
重写穿梭框组件,使其变成分页形式加载,具体改变的点有:
啦啦啦~~~
博客地址:https://ainyi.com/57
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。