使用的数据如下格式:文章来源:https://www.toymoban.com/news/detail-501930.html
[
{
label:'北京市',
value:'1',
children:[
{
label:'北京市',
value:'5026',
children:[
{
label:'东城区',
value:'37',
},
{
label:'西城区',
value:'38',
}
]
}
]
}
]
<picker mode="multiSelector" :value="multiIndex" :range="newAddressList" range-key="label" @change="pickerChange" @columnchange="pickerColumnchange">
<view class="uni-input">
{{newAddressList[0][multiIndex[0]].label}}-{{newAddressList[1][multiIndex[1]].label}}-{{newAddressList[2][multiIndex[2]].label}}
</view>
</picker>
文章来源地址https://www.toymoban.com/news/detail-501930.html
<script>
export default {
data() {
return {
oldAddressList: [],
newAddressList:[
[],[],[]
],
multiIndex: [0,0,0]
}
},
mounted() {
// 初始化省份数据
// this.handleProvinceChange(0);
var that = this;
var url = '你的接口';
var data = {
}
that.util.asynRequest(url, data, 'post',
function(res) {
console.log(res.data);
that.oldAddressList = res.data;
that.initAddress();
},
function(err) {
console.log(JSON.stringify(err));
that.util.showToast(err.message);
})
},
methods: {
initAddress(){
this.newAddressList[0] = this.oldAddressList.map((item,index)=>{
// console.log('item:',item);
var obj = {
label:item.label,
value:item.value
}
return obj
})
this.newAddressList[1] = this.oldAddressList[this.multiIndex[0]].children.map((item,index)=>{
// console.log('item:',item);
var obj = {
label:item.label,
value:item.value
}
return obj
})
this.newAddressList[2] = this.oldAddressList[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{
// console.log('item:',item);
var obj = {
label:item.label,
value:item.value
}
return obj
})
console.log('this.newAddressList:',this.newAddressList);
},
pickerChange(e){
console.log('pickerChange:',e);
},
pickerColumnchange(e){
console.log('pickerColumnchange:',e);
// 第几列滑动
// console.log(e.detail.column);
// 第几列滑动的下标
// console.log(e.detail.value)
// 第一列滑动
if(e.detail.column === 0){
this.multiIndex[0] = e.detail.value;
this.newAddressList[1] = this.oldAddressList[this.multiIndex[0]].children.map((item,index)=>{
// console.log('item:',item);
var obj = {
label:item.label,
value:item.value
}
return obj
})
this.newAddressList[2] = this.oldAddressList[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{
// console.log('item:',item);
var obj = {
label:item.label,
value:item.value
}
return obj
})
this.multiIndex.splice(1, 1, 0)
this.multiIndex.splice(2, 1, 0)
}
if(e.detail.column === 1){
this.multiIndex[1] = e.detail.value
this.newAddressList[2] = this.oldAddressList[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{
// console.log('item:',item);
var obj = {
label:item.label,
value:item.value
}
return obj
})
// 第二列 滑动 第三列 变成第一个
this.multiIndex.splice(2, 1, 0)
}
if(e.detail.column === 2){
this.multiIndex[2] = e.detail.value
}
},
}
}
到了这里,关于uniapp picker mode=“multiSelector“ 实现省市区三级联动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!