接口返回值格式:
二级级联-vue2
<picker mode="multiSelector" @change="bindPickerChange" @columnchange="columnchange" :value="index"
:range="array" range-key="label">
<view class="uni-input">{{title}}</view>
</picker>
export default {
data() {
return {
index: [0, 0],
array: [
[],
[]
],
childArr: [], // 二级分类数据源
title: '请选择'
}
}
}
//籍贯二级列表处理
// 获取二级分类
columnchange(e) {
// 当滚动切换一级分类时,为当前的一级分类添加它的子类
if (e.detail.column == 0) {
// #ifdef H5
// 在小程序中直接赋值无效 H5 可直接赋值
this.array[1] = this.childArr[e.detail.value]
// #endif
// #ifdef MP-WEIXIN
// 在 H5 环境下 $set 会导致一级分类无法滚动, 小程序正常运行
this.$set(this.array, 1, this.childArr[e.detail.value])
// #endif
}
},
// 选择籍贯
bindPickerChange(e) {
console.log('picker发送选择改变,携带值为', e)
let selectValue = e.detail.value;
if (this.array[0].length != 0) {
this.title = this.array[0][selectValue[0]].label
// 只传市一级的id
this.personData.native_place = this.array[0][selectValue[0]].value
};
if (this.array[1].length != 0) {
this.title += ',' + this.array[1][selectValue[1]].label
this.personData.native_place = this.array[1][selectValue[1]].value
}
},
// 获取籍贯
async getNativePlace() {
//获取接口数据
const {
data
} = await GetNativePlace()
// 一级分类的数据源
this.array[0] = data
// 将数据源中的二级分类 push 进 childArr,作为二级分类的数据源
this.childArr = data.map((item) => item.children)
// 第一次打开时,默认给一级分类添加它的二级分类
this.array[1] = this.childArr[0]
},
三级级联-vue3
<picker mode="multiSelector" :value="pageData.multiIndex" :range="pageData.newAddressList" range-key="label"
@change="pickerChange" @columnchange="pickerColumnchange">
<view class="uni-input">
{{pageData.addressName}}
</view>
</picker>
const pageData = reactive({
oldAddressList: [],
newAddressList: [
[0],
[0],
[0]
],
multiIndex: [0, 0, 0],
addressName: '请选择',
})
//获取省市区
const getProvinceEtc = async () => {
//获取接口数据
const res = await uni.$http.post('/api/common/getCity')
pageData.oldAddressList = res.data.data;
initAddress();
}
getProvinceEtc()
function initAddress() {
pageData.newAddressList[0] = pageData.oldAddressList.map((item, index) => {
// console.log('item:',item);
var obj = {
label: item.label,
value: item.value
}
return obj
})
pageData.newAddressList[1] = pageData.oldAddressList[pageData.multiIndex[0]].children.map((item, index) => {
// console.log('item:',item);
var obj = {
label: item.label,
value: item.value
}
return obj
})
pageData.newAddressList[2] = pageData.oldAddressList[pageData.multiIndex[0]].children[pageData.multiIndex[1]]
.children.map((
item, index) => {
// console.log('item:',item);
var obj = {
label: item.label,
value: item.value
}
return obj
})
// console.log('this.newAddressList:', pageData.newAddressList);
}
//变更选择
function pickerChange(e) {
// console.log('pickerChange:', e.detail);
// console.log(pageData.newAddressList[2][e.detail.value[2]]);
// console.log(pageData.newAddressList[2][e.detail.value[2]].value);
pageData.addData.area_id = pageData.newAddressList[2][e.detail.value[2]].value;
pageData.addressName = pageData.newAddressList[0][pageData.multiIndex[0]].label + '-' + pageData.newAddressList[1][
pageData.multiIndex[1]
].label + '-' + pageData.newAddressList[2][pageData.multiIndex[2]].label
}
function pickerColumnchange(e) {
// console.log('pickerColumnchange:', e);
// 第几列滑动
// console.log(e.detail.column);
// 第几列滑动的下标
// console.log(e.detail.value)
// 第一列滑动
if (e.detail.column === 0) {
pageData.multiIndex[0] = e.detail.value;
pageData.newAddressList[1] = pageData.oldAddressList[pageData.multiIndex[0]].children.map((item, index) => {
// console.log('item:',item);
var obj = {
label: item.label,
value: item.value
}
return obj
})
pageData.newAddressList[2] = pageData.oldAddressList[pageData.multiIndex[0]].children[pageData.multiIndex[1]]
.children.map(
(item, index) => {
// console.log('item:',item);
var obj = {
label: item.label,
value: item.value
}
return obj
})
pageData.multiIndex.splice(1, 1, 0)
pageData.multiIndex.splice(2, 1, 0)
}
if (e.detail.column === 1) {
pageData.multiIndex[1] = e.detail.value
pageData.newAddressList[2] = pageData.oldAddressList[pageData.multiIndex[0]].children[pageData.multiIndex[1]]
.children.map(
(item, index) => {
// console.log('item:',item);
var obj = {
label: item.label,
value: item.value
}
return obj
})
// 第二列 滑动 第三列 变成第一个
pageData.multiIndex.splice(2, 1, 0)
}
if (e.detail.column === 2) {
pageData.multiIndex[2] = e.detail.value
}
}