html5地区级联选择,【JS】vue+vant移动端地区级联选择组件

首页

专栏

javascript

文章详情

0

vue+vant移动端地区级联选择组件

quanta发布于 今天 08:25

写在开头：项目的框架是vue+vant，业务需求一个级联的地区选择，写完才发现vant本身也有这组件….后来看vant本身用的逻辑跟我不太一样，觉得还有点思考价值那就发上来当做实现记录吧~

总体思路(select与tabs独立)：

列表选择(select)

1)获取当前tabs的长度 -> 设置当前active的name

2)通过levelCollect(最终选择的数据集)设置每个层级，例：[‘第一层数据’,’第二层数据’,’第三层数据’,…]

3)删除后级数据，更新tabs长度

4)如果有下级，新增active并选中，如果没有设置完成

tab选择(tabsClick)

1)拷贝一次原始数据，设置列表筛选数据：0级使用原始数据，其它选用存储数据设置高亮

2)滚动到选中

目前功能支持：

·自定义数据

·N级数据联动

·上级数据选择后修改

·选择项高亮

todo：

数据回填

效果图：

addressCard.vue

请选择所在地区

.

{ {item.name}}

import { Tab,Tabs } from 'vant';

import areaJson from './areaJson/pcas-code.json'

export default {

components: {

[Tab.name]: Tab,

[Tabs.name]:Tabs

},

data(){

return{

active:1,

levelCollect:[],

originArea:areaJson,

areaJson,

tabsData:[{