uview2.x u-picker省市区三级联动
uview2.x u-picker省市区三级联动
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
提示:这里可以添加本文要记录的大概内容:
搜索了很多网上素材,要么是uview1.x的三级联动,要么是不合适,所以我自己研究了下代码,官网给的静态数据一开始没看明白,把数据都分开了,后面才发现,默认开始显示第二列的是第一列的选中后的数据,这是运行后的结果
`
二、使用步骤
1.页面标签
<u-picker keyName="name" :show="isAddress" @cancel="isAddress=false" ref="uPicker" class="uPicker"
:columns="addressColumns" @confirm="addressConfirm" @change="changeHandler" :defaultIndex="defaultAddress">
data(){
return {
defaultAddress: [],
addressColumns: [],
addressData:[]
}
}
2.加载省市区数据
代码如下(示例):初始化
let {
provinceData,
cityData,
areaData
} = city;
let arr=[];
let province=[];
let arr1=[];
let arr2=[];
provinceData.forEach((item, index) => {
arr.push({
...item,
children: []
});
arr[index].children.push(...cityData[index]);
arr[index].children.forEach((item1, index1) => {
item1['children'] = [];
item1.children.push(...areaData[index][index1]);
});
});
province=arr.map(e=>{return e.label});
arr1=arr[0].children.map(e=>{return e.label});
arr2=arr[0].children[0].children.map(e=>{return e.label});
this.addressColumns=[province,arr1,arr2]
this.addressData=arr;
3.滑动后进行数据变化
代码如下(示例):
changeHandler(e) {
const {
columnIndex,
value,
values, // values为当前变化列的数组内容
index,
indexs,
// 微信小程序无法将picker实例传出来,只能通过ref操作
picker = this.$refs.uPicker
} = e
// 当第一列值发生变化时,变化第二列(后一列)对应的选项
if (columnIndex === 0) {
// picker为选择器this实例,变化第二列对应的选项
let children1=this.addressData[index].children.map(e=>{return e.label})
picker.setColumnValues(1, children1)
// console.log(this.addressData[index].children[indexs[1]].children)
let children2=this.addressData[index].children[indexs[1]].children.map(e=>{return e.label})
picker.setColumnValues(2, children2)
}
if (columnIndex === 1) {
// console.log("index",index,"indexs",indexs)
let children3=this.addressData[indexs[0]].children[indexs[1]].children.map(e=>{return e.label})
picker.setColumnValues(2, children3)
}
},
4.点击确认
addressConfirm(e) {
this.isAddress=false;
this.addInfo.area=`${e.value[0]}-${e.value[1]}-${e.value[2]}`
},
5.回填
let temp= item.area.split('-');
let index,index1,index2=0;
let arr,arr1,arr2=[];
this.addressData.forEach((item, i) => {
if(item.label==temp[0]){
index=i;
item.children.forEach((v,y)=>{
if(v.label==temp[1]){
index1=y;
v.children.forEach((o,n)=>{
if(o.label==temp[2]){
index2=n;
}
})
};
})
}
});
arr=this.addressData.map(e=>{return e.label});
arr1=this.addressData[index].children.map(e=>{return e.label});
arr2=this.addressData[index].children[index1].children.map(e=>{return e.label});
this.addressColumns=[arr,arr1,arr2]
this.defaultAddress=[index,index1,index2];
总结
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgbeahh
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13