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

您所在的位置：网站首页 › uview三级联动 › 支付宝小程序使用uView实现省市区三级联动的坑

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

2023-10-12 01:34| 来源: 网络整理| 查看: 265

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

本次使用的是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])

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