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 = false
	let provinceCode = value[0].comCode
	let cityCode = value[1].comCode ? value[1].comCode : ''
	let areaCode = value[2] ? value[2].comCode : ''
	let provinceName = value[0].comName
	let 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>

五、vant picker文档链接

Vant 2 - Mobile UI Components built on Vue

页面实现效果