预期实现的效果：

选中后的效果：

// 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:[],//省市区选中项indexssqValue:"",//目前选中值的文字}},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);},}
}