uniapp 二级联动

记录使用uniapp实现二级联动效果

1、下面是效果图

2、代码如下

1、view
<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange"
:value="multiIndex" :range="multiArray">
    <view class="font-small">
        请选择地区
        <span>
            <img style="width: 25rpx;height: 25rpx;vertical-align: middle;"
              src="@/static/img/down.png" alt="" srcset="">
         </span>
    </view>
</picker>

2、在data中使用了图中几个变量

3、使用二级联动的数据结构就是官网提供的样子。

[
    ['广东','江西'],
    ['广州', '深圳', '佛山']
]

4、当下拉省份的时候变化城市

在二级联动的时候 第一列的省始终为0 ，只要改变后面的市的数据就可以了
bindMultiPickerColumnChange: function(e) {
    console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
    this.multiIndex[e.detail.column] = e.detail.value
    if(e.detail.column === 0) {
            this.multiIndex[0] = e.detail.value;
            console.log(this.multiArrayCityArry[e.detail.value]);
            this.multiArray = [
                    this.multiArrayCity,
                    this.multiArrayCityArry[e.detail.value]
            ]
            console.log(this.multiArray);
    }

    this.$forceUpdate()
},

总结思路：

1、查看官网提供的数据，把后端请求的数据改变为官网提供的数据结构、在看官网的结构：数组里面放两个数组，第一个数组是自己的省份、第二个数组就是当前省份的下属城市，在下拉省份的时候进行修改把城市替换就可以达到自己想要的效果。