递归组件实现移动端区域N级联动

1,229 阅读1分钟

引言

需求有时候来的就是这么猝不及防,就在前天产品小姐姐提出现在的省市区三级联动已经满足不了我们的实际应用了,我们要搞一版支持多级联动,并且交互是这样子的(类似某app)表面笑嘻嘻,心里苦哈哈。

微信图片_20211028152557.jpg

需求点

  1. 数据层级不限
  2. 支持多选
  3. 子节点有个不限节点,不限节点选中代表其父节点选中,兄弟节点取消选中
  4. 父节点显示子节点选中数量

明确了需求接下来就动.动..动...动....动............手吧!我的做法是根据数据层级运用递归组件显示数据列。

父组件

微信图片_20211028150550.png

子组件

微信图片_20211028151206.png

微信图片_20211028151244.png

最终效果(UI什么的都是浮云,不要在意这些细节)

2fad2c9a723e42951e9e1d3e74b0ee2e.gif