支付宝小程序 使用uView实现省市区三级联动的坑

第一次开发支付宝小程序，已经准备好坠坑了，没想到坑这么大！！！

本次使用的是uView的2.0版本，不是1.0，别问我为什么不用1.0 ，哈哈哈哈咋就喜欢用新的

，所以坠坑就是自作自受了呜呜呜呜呜

首先就是正常的下载引入了，我在上一篇文章已经讲过怎么操作了，现在就不多说了。附上上一篇的链接CSDN

我是使用的死picker的多列模式与多列联动

属性columns传递的是数据，如果是二级联动，传递的就是二位数据 ，官方示例

凄惨的是，该组件本身不提供数据，需要我们自己定义本地数据， 

然后我找到的数据的结构是这样的。。

	const area = [{
					"value": '北京市',
					"label": '北京市',
					"children": [{
						"vallue": '北京城区',
						"label": '北京城区',
						"children": [{
							"value": '东城区',
							"label": '东城区',
							.....
						}]
					}]

		     }]

因为做的是省市区的三级联动，所以我传递的必须是三维数据，附上我改造数据的过程

// 处理省市区数据
			formatData() {
				var prov = [] //省份数组
				var shi = [] //市数组
				var qu = [] //区数组
				cities.forEach((provItem, provIndex) => {
					prov.push(provItem.value)
					if (provItem.children.length > 0) {
						provItem.children.forEach((shiItem, shiIndex) => {
							if (shi[provIndex] == null) {
								shi[provIndex] = [shiItem.value]
							} else {
								shi[provIndex].push(shiItem.value)
							}
							if (shiItem.children.length > 0) {
								shiItem.children.forEach((quItem, quIndex) => {
									if (qu[provIndex] == null) {
										qu[provIndex] = [
											[quItem.value]
										]
									} else {
										if (qu[provIndex][shiIndex] == null) {
											qu[provIndex][shiIndex] = [quItem.value]
										} else {
											qu[provIndex] 
                                            [shiIndex].push(quItem.value)
										}
									}
								})
							}
						})
					}
				})
				this.columns.push(prov, shi[0], qu[0][0])

经过一番周折终于得到了如下数据 

然后坑就来了，我赋值显示，？？？？显示两条数据是怎么回事？？“？有没有大佬看看是咋回事？

 

 我一开始以为是样式的问题，然后去改样式了。。。

通过控制台找到了类名

在vue组件中，在style标签中添加scoped属性，这样在这里定义的css只作用于当前组件中的元素，可使组件之间的样式不会相互污染，使样式私有化。比如在父组件内使用子组件，父组件的样式不会渗透到子组件中。因此我们需要使用深度作用选择器/deep/，然后根本没有作用。。。不能修改组件的样式

 

 

 好吧，我还是老老实实去用uView1.0吧。。。

完结啦！！！

有哪位大佬有解决方法的麻烦评论踢我一下！！！