預期實現的效果：

選中后的效果：

// 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);},}
}