关于uniapp的picker的使用

最近入职的一家公司是基于uniapp开发app的，很多东西不懂，最近遇到一个关于picker选择的问题

要求二级联动，左边选择省份，右边选择市

但是picker的原生的选择只有

这样的三级联动，没有选择省然后再选择市这样单独选择的模式

然后我去uniapp的官网查看了 picker的描述和属性：
mode属性：
它有五个属性值

1. mode = selector 表示普通选择器

属性名	说明
range	这个是picker展示的用于选择的数据，数据格式为Array或者Object格式
range-key	这是展示的数据的值，当range的数据是一个数组包裹对象的格式，通过它来表示显示对象的那个属性
value	这属性表示显示的下标，就是表示选择了range的第几个(就是选择的值相对于的下标，是从0开始的)
@change	用于定义改变了(选择了列表)的事件，其中event.detail 的值就是当前选择的下标
disabled	表示是否禁用，就是是否可以触发选择事件，如果值为true表示改picker不可以选择
@cancel	取消选择或点遮罩层收起 picker 时触发

2. mode = multiSelector 表示多列选择器

属性	说明
range	这里的是展示的数据，这里的数据应该是一个二维数组，就是数组包对象，对象再包数组的格式
range-key	这个表示需要显示的数据的键值对中的键
value	他的值是下标从0开始
@change	value 改变时触发 change 事件，event.detail = {value: value}
@columnchange	这是多列显示特有的事件，当某一列发生改变的时候触发，event.detail = {column: column, value: value}，column表示改变的列，value表示改变的当列的下标的值
@cancel	取消选择时触发的事件
disabled	表示改选择框是否禁用，默认值为false

因为JavaScript的限制不可以检测数组的下标发生改变或者通过数组的下标来修改数组对应的值

但是再微信开发工具的pc模拟器可能出现拖动数据错乱，但是真机使用正常

解决办法，使用splice方法通过下标改对应数组的数据即可

对于vue的解决办法有两种，一个是用set方法，另外一个是使用 splice方法

3. mode = time 表示时间选择器

属性	说明
value	表示选中的时间，格式为"hh:mm"
start	表示有效时间范围的开始,格式为字符串，字符串格式为"hh:mm"(App不支持)
end	表示有效时间范围的结束，格式为字符串，字符串格式为"hh:mm"(App不支持)
@change	value 改变时触发 change 事件，event.detail = {value: value}
@cancel	取消选择时触发的事件
disabled	表示是否禁用改选择框，默认值为false

4. mode = date 表示日期选择器

属性	说明
value	表示选中的日期，格式为"YYYY-MM-DD"
start	表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
end	表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
fields	有效值 year,month,day，表示选择器的粒度，默认为day，year表示选择粒度为年，month表示选择选择选择的粒度为月
@change	value 改变时触发 change 事件，event.detail = {value: value}，同上表示下标
@cancel	取消选择时触发的事件
disabled	是否禁用，默认值为false

5. mode = region 表示地区选择器
   多列picker方式的地区选择不能运行在支付宝小程序上,只有基于picker-view的可以全端运行

属性	说明
value	表示选中的省市区，默认选中每一列的第一个值，数组格式
custom-item	可为每一列的顶部添加一个自定义的项
@change	value 改变时触发 change 事件，event.detail = {value: value}，同上
@cancel	取消选择时触发
disabled	是否禁用，默认值为false

<view class="list">
				<view class="school">
					<picker mode="selector" :range="provinceData" range-key="label"  @change="sheng">
						<image class="arrow_down" src="/static/images/login_arrow_down.png" mode=""></image>
						<text class="check_school">{{province}}</text>
					</picker>
				</view>
				<view class="class">
					<picker mode="selector" :range="city1" range-key="label" :disabled='jy'  @change="shi">
						<image class="arrow_down" src="/static/images/login_arrow_down.png" mode=""></image>
						<text class="check_school">{{cityy}}</text>
					</picker>
				</view>
			</view>

sheng(e){
				var _this = this 
				console.log(e);
				var index = e.detail.value 
				_this.province = _this.provinceData[index].label 
				_this.city1  = _this.city[index] 
				// console.log(JSON.stringify(_this.city1));
				
				_this.jy = false
			}

shi(e){
				var _this = this 
				var index = e.detail.value 
					_this.cityy = _this.city1[index].label 
			},

关于城市的数据，是引入uniapp对应的城市的包，
结果研究发现它们的城市的数据是关于下标对应的，就是说第一个省份的包的对应省的下标，就是关于市列表包对应的下标


所以只需要通过value获取当前选择的省份，再通过对应的下标获取对应的市级别的列表即可
这里需要注意的是，需要对市和一下的级别的选择添加一个禁止属性，因为对于逻辑上来说，只有选择省分后才能选择市