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

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

示例

介绍

  • 实现省市区三级多选联动,可任选一个省级、市级、区级,加入已选框,也可以在已选框中删除对应的区域。
  • 选择对应仓库,自动勾选仓库对应的省,取消就反选
  • 选择同样地区,选择省级或市级,若该对象下面的市级或区级已有选择,就自动合并为一个省级或市级:
例如:
已选择:广东省广州市荔湾区
点击加入:广东省广州市
最后显示:广东省广州市
广州市已被选择,对应市级的区将不显示,只显示对应的市

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

设计

  • 拆分组件:仓库和省市区框作为父组件
  • 三个区域框和一个已选框相似,复用一个组件 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,已选区域有该省则过滤,无则添加,当点击取消勾选的时候,也实时将已选区域中对应的省级删除掉。

相关连接

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

什么生命周期,在我看来就是各种回调 &&电商项目作业检查 -- 张xx

今天咱们的零基础课讲到了react的生命周期,什么三种状态啊,五种处理事件啊,函数的名字都特别的长。还有表单应用和react中哪使用ajax方法,以及get回来...

18580
来自专栏ytkah

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

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

415120
来自专栏一场梦

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

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

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

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

47330
来自专栏游戏杂谈

Unity 5.4版本 Application.systemLanguage 失效

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

16020
来自专栏花叔的专栏

解读10.13发布的小程序新功能

距离上次更新已经有一个月了,小程序终于又更新了,但其实所更新的内容并不太多,这有点违背微信团队的快速迭代的习惯,难道在酝酿更大的迭代吧?嘿嘿~~~ 回归正题,先...

411120
来自专栏FreeBuf

XSS挑战第一期Writeup

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

273100
来自专栏web前端教室

[周末课程]什么是“页面业务流程”分析思维导图?如何编写页面假JSON数据? &下一个前端组件“日历”

大家好,时间飞快一晃又到了周末了,今天要跟大家一起学习的有以下这些内容: -- 什么是“页面业务流程”分析思维导图?如何编写页面假JSON数据? -- 进入下一...

24850
来自专栏数据小魔方

sparklines迷你图系列3……Evolution(Line)

该类型图表既然被划分到Evolution类型,想必大家也能大概猜出其用途,就是用于评估指标走势的优劣、好坏与波动区间范围。 这样形式可以更好的呈现一类指标一段时...

346100
来自专栏数据小魔方

XML/HTML/JSON——数据抓取过程中不得不知的几个概念

之前写了很多网络数据数据抓取的案例,无论是关于R语言还是Python的,里面大量使用xml\html\css\ajax\json等这些概念,可是一直没有对这些概...

44660

扫码关注云+社区

领取腾讯云代金券