关于uniapp的picker的使用_uni-data-picker不用最后一个节点拿值

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

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

但是picker的原生的选择只有

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

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

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

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

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

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

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

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

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

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

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

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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 
			},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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


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