当前位置: 首页 > Web前端 > vue.js

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

时间:2023-03-31 23:52:24 vue.js

写在开头:项目的框架是vue+vant,业务需要一个级联区域选择。写完发现vant本身也有这个组件。。。。后来看到vant本身用的逻辑和我的不太一样,感觉有点价值,贴出来作为一个实现记录~大致思路(select和tabs是独立的):列表选择(select)1)获取当前tabs的长度->设置当前active的名称2)通过levelCollect设置(最终选择的数据集)每一层,例如:['第一层数据','第二层数据','第三层数据',...]3)删除后面的层数据,更新tabs的长度4)如果有下层,添加新的active和selected,如果没有设置tabselection(tabsClick)1)复制一次原始数据,设置list过滤数据:使用0级原始数据,选择存储的数据并设置高亮2)scroll选择当前功能支持:自定义数据·N级数据联动·上级数据选择后修改·选中项高亮显示todo:数据回填效果图:addressCard.vue.addressWrapper{padding:20px10px;h4{文本对齐:居中;:20px;/deep/.van-tabs__content{显示:无;}.content{margin-top:20px;高度:200px;溢出:滚动;选择{颜色:红色;/pcas-code.json