一、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
页面实现效果