uni-app picker多列选项

预期实现的效果：

选中后的效果：

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