预期实现的效果:
选中后的效果:
// Dom部分
<template>
<picker mode="multiSelector" :range="ssqRange" range-key="name" @columnchange="ssqColumnChange" @change="ssqChange" class="picker-item">
<view class="picker-view">
<text>{{ssqValue}}</text>
<view class="jiantou"></view>
</view>
</picker>
</template>
// JS部分
export default {
data() {
return {
ssqData:[],//省市区的级联数据
ssqRange:[],//封装好的省市区下拉
ssqIndex:[],//省市区选中项index
ssqValue:"",//目前选中值的文字
}
},
methods:{
async getProvincesCitiesDistricts(){
// 获取省市区数据
await fetch("/static/provincesCitiesDistricts.json")
.then(response => response.json())
.then(data => {
this.ssqData=data;
if(this.ssqData.length>0){
// 多列picker要求的数据格式是 [省数组,市数组,区数组]
this.ssqRange = [
this.ssqData,
this.ssqData[0].list,
this.ssqData[0].list[0].list
];
this.ssqIndex = [0,0,0];// 索引默认第一个
}
});
},
ssqColumnChange(e){//多列里的每一列选项改变
let {column,value} = e.detail;
this.ssqIndex[column] = value;//当前操作的这一列赋新值
if(column===0){//第一列改变
this.ssqIndex[1] = 0;
this.ssqIndex[2] = 0;
}else if(column===1){//第二列改变
this.ssqIndex[2] = 0;
}
this.ssqRange = [
this.ssqData,
this.ssqData[this.ssqIndex[0]].list,
this.ssqData[this.ssqIndex[0]].list[this.ssqIndex[1]].list
];
},
ssqChange(e){//点击确定按钮,选项改变
this.ssqIndex = e.detail.value;
this.getSsqValue();//计算选中项的中文
},
getSsqValue(){
let result=""
if(this.ssqRange.length>0){
this.ssqRange.forEach((e,i)=>{
result += this.ssqRange[i][this.ssqIndex[i]].name + "-"
})
}
this.ssqValue= result.slice(0,-1);
},
}
}