uniapp省市区三级联动

地址三级连动
<picker v-if=“index==2” mode=“multiSelector” @columnchange=“bindMultiPickerColumnChange”
:value=“regionIndex” :range=“regionArray” @change=“bindMultiPickerChange” range-key=“label”>
{{provinceName}}
{{cityName}}
{{areaName}}

请选择收货地区

// 省
provinceArray: [],
provinceID: “”,
provinceName: “”,
// 市
cityArray: [],
cityID: “”,
cityName: “”,
// 区
areaArray: [],
areaID: “”,
areaName: “”,
// 省市区集合 - 多列选择地区数据
regionArray: [],
// 省市区集合下标 - 多列选择值数据
regionIndex: [0, 0, 0],
receiveInfo: [{
receiveTitle: ‘收货人’,
receiveInput: ‘请填写收货人姓名’,
name: ‘’
},
{receiveTitle: ‘手机号码’,
receiveInput: ‘请填写收货人手机号’
},
{receiveTitle: ‘所在地区’,
receiveInput: ‘省市区县、乡镇等’
}, {
receiveTitle: ‘详细地址’,
receiveInput: ‘街道、楼牌号等’
}
]

getCsh: function() {
let that = this
getRegionTree().then(res => {
that.provinceArray = res.data.data
that.cityArray = res.data.data[0].children
that.areaArray = res.data.data[0].children[0].children
that.regionArray = [
that.provinceArray,
that.cityArray,
that.areaArray
]
})
},
bindMultiPickerColumnChange: function(e) {
console.log(e, ‘+++++’)
var that = this;
var data = {
regionArray: that.regionArray,
// 赋省市区集合
regionIndex: that.regionIndex,
// 省市区集合下标,多列数值选择器
};
console.log(e)
data.regionIndex[e.detail.column] = e.detail.value;
// 集合下标触发第几列 把触发的value值赋给它
switch (e.detail.column) {
case 0: //滑动省
that.regionArray[1] = that.regionArray[0][e.detail.value].children;
// 省市区集合第2列关于第一列的数据
that.cityArray = that.regionArray[0][e.detail.value].children;
that.regionIndex[1] = 0;
// 省市区集合下标第二列的数据赋为零
that.regionArray[2] = that.regionArray[1][0]
.children;
// 省市区集合第三列数据的值
that.areaArray = that.regionArray[1][0].children;
that.regionIndex[2] = 0;
// 省市区下标第三列数据赋为零
that.regionArray = [
that.provinceArray,
that.cityArray,
that.areaArray
];
break;
case 1: //滑动市
that.regionArray[2] = that.regionArray[1][e.detail.value].children;
// 省市区集第三列的值
that.areaArray = that.regionArray[1][e.detail.value].children;
that.regionIndex[2] = 0;
// 省市区集第三列下标为零
that.regionArray = [
that.provinceArray,
that.cityArray,
that.areaArray
];
break;
case 2:
that.regionArray = [
that.provinceArray,
that.cityArray,
that.areaArray
];
// 选中的是第三列,直接赋值
break;
}},
// 省市区 change事件 – picker 确定事件
bindMultiPickerChange(e) {
// 确定三列事件
console.log(e.detail.value);
// 三列选中的下标
var that = this;
that.provinceID = that.regionArray[0][e.detail.value[0]].value;
// 省集ID 省市区集第一列选中的第几个值的ID
that.cityID = that.regionArray[1][e.detail.value[1]].value;
// 市集ID 省市区集第二列选中的第几个值的ID
that.areaID = that.regionArray[2][e.detail.value[2]].value;
// 区集ID 省市区集第三列选中的第几个值的ID
that.regionIndex = e.detail.value;
// 省市区集下标 三列下标值
that.provinceName = that.regionArray[0][e.detail.value[0]].label;
// 省名 省市区集第一列选中的第几个值的名
that.cityName = that.regionArray[1][e.detail.value[1]].label;
// 市名 省市区集第二列选中的第几个值的名
that.areaName = that.regionArray[2][e.detail.value[2]].label;
// 区名 省市区集第三列选中的第几个值的名
}