1. uniapp 省市区三级联动
在uniapp中实现省市区三级联动的方法。首先,在根目录创建一个存放省市区js文件,定义省市区数据。然后,在页面中使用picker组件,设置mode为multiSelector,绑定省市区数据。通过监听picker的change和columnchange事件,实现省市区数据的联动选择。最后,将选择的省市区数据显示在页面上。该方法简单易用,适用于需要省市区选择的场景。

1.1. 组件city-picker.vue
<template>
<view>
<picker class=\”city-picker-layout\”
mode=\”multiSelector\”
range–key=\”name\”
:range=\”array\”
:value=\”value\”
@change=\”bindPickerChange\”
@columnchange=\”columnchange\”>
<slot></slot>
</picker>
</view>
</template>
<script>
import AllAddress from \’/api/city\’
let selectCode = [\’\’, \’\’, \’\’]
let selectValue = [\’\’, \’\’, \’\’]
export default {
name: \’modal\’,
data() {
return {
value: [0, 0, 0],
array: [],
index: 0
}
},
created() {
this.initSelect()
},
props: {
},
methods: {
// 初始化地址选项
initSelect() {

