Vue + Vant Picker实现省市区三级联动

一、picker选择器的数据由columns属性控制，columns中有几个元素就代表该选择器有多少级，通过change方法来给对应列赋值

this.columns = [{values: citys,className: "column1",defaultIndex: 0,flex: 1, //控制每列的宽度},{values: citys[0].children,className: "column2",defaultIndex: 0,flex: 1, //控制每列的宽度},{values: citys[0].children[0].children,className: "column3",defaultIndex: 0,flex: 2, //控制每列的宽度}
]

二、组件方法

//使用van-picker
onConfirm(value, index){this.cityShow = falselet provinceCode = value[0].comCodelet cityCode = value[1].comCode ? value[1].comCode : ''let areaCode = value[2] ? value[2].comCode : ''let provinceName = value[0].comNamelet ciryName = value[1] ? value[1].comName : ''let areaName = value[2] ? value[2].comName : ''
},onChange(picker, value, index){if (index == 0) {picker.setColumnValues(index + 1, value[index].children || [])picker.setColumnValues(index + 2,value[index].children[index].children || [])}if (index == 1) {picker.setColumnValues(index + 1, value[index].children || []);}
},

三、后台返回数据格式

city = [{{"children": [{"children": [{"comCode": "110101","comName": "东城区"},{"comCode": "110102","comName": "西城区"},{"comCode": "110105","comName": "朝阳区"},{"comCode": "110106","comName": "丰台区"},{"comCode": "110107","comName": "石景山区"},{"comCode": "110108","comName": "海淀区"},{"comCode": "110109","comName": "门头沟区"},{"comCode": "110111","comName": "房山区"},{"comCode": "110112","comName": "通州区"},{"comCode": "110113","comName": "顺义区"},{"comCode": "110114","comName": "昌平区"},{"comCode": "110115","comName": "大兴区"},{"comCode": "110116","comName": "怀柔区"},{"comCode": "110117","comName": "平谷区"},{"comCode": "110118","comName": "密云区"},{"comCode": "110119","comName": "延庆区"}],"comCode": "110000","comName": "北京市"}],"comCode": "110000","comName": "北京"}]

四、页面组件

<van-popup v-model="cityShow" position="bottom"><van-picker show-toolbar value-key="comName" :columns="columns" @cancel="cityShow = false"@confirm="onConfirm" @change="onChange" />
</van-popup>