注意,这个u-select仅限弹窗,不包含展示,属性自己级去看官网
<!-- 三联地址 -->
<u-select v-model="u_selectShow" mode="mutil-column-auto" :list="provinceArr" title="选择区县" @confirm="confirm" @cancel="closeCancel" @tap.stop="stop"></u-select>
注意点2个
1,list只接受lable和value,(二级数组)children外的这两个联动的key,不接受其他的key名
2,滚动地址方法里面@confirm=“confirm”的回调函数方法中参数e是个多维数组,返回的是选择的数据lable和value,自行赋值即可
联动地址
//三级联动选择地址事件,点击确定按钮
confirm(e) {
this.provinceCode= e[0].value
this.provinceName=e[0].label
this.cityCode= e[1].value
this.cityName= e[1].label
this.countyCode= e[2].value
this.countyName= e[2].label
//展示的数据再input展示
this.select = `${this.provinceName}/${this.cityName}/${this.countyName}`
console.log("三级联动事件",e,this.select)
},
如果你的数据key名不是lable或者
比如我的是对应的code和text
处理方法,使用循环嵌套 provinceArr是获取的三联地址
let arr =[]
provinceArr.forEach((item,index)=>{
arr[index] = {
value:item.code,
label:item.text,
children:item.children
}
//第二级
item.children.forEach((v,i)=>{
arr[index].children[i]={
value:v.code,
label:v.text,
children:v.children
}
//第三
v.children.forEach((m,n)=>{
arr[index].children[i].children[n] = {
value:m.code,
label:m.text,
}
})
})
})
this.provinceArr = arr
console.log(this.provinceName,this.cityName,this.select,this.provinceArr)
也可以使用递归,目前还在优化,欢迎提出更好的方法