在h5实现省市区的三级联动，使用了mint-ui，记录一下自己遇到的问题。防止下次踩坑
<mt-picker :slots="areaList" valueKey="name" @change="selectArea"></mt-picker>
官网给的绑定的数据格式
areaList: [
{
flex: 1,
values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
className: 'slot1',
textAlign: 'right'
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
className: 'slot3',
textAlign: 'left'
}
]
};
但是后台可能返回的values数据是这样的
value:[{id:1, name: '北京'}, {id:2, name: '上海'}, {id:3, name: '广州'}]
这样显示就不是我们想要的效果，这里我们就要给mt-picker组件加上valueKey=name。这样就能达到我们想要的效果
第二个问题
area(id) { //调取地区函数
return new Promise((resolve, reject) => {
this.$ajax({
url: `/api/region/list/sub/${id}`,
method: 'GET'
}).then((res) => {
resolve(res)
}).catch((err) => {
reject(err)
})
})
},
selectArea(picker, values) { //选择区域
if (this.flag) {
this.area(values[0].id).then((res) => { //通过一级省的Id获取市的列表
picker.setSlotValues(1, res) //将市的地区列表放入areaList的二级列表中
})
this.pickerValue = picker.getValues()
}
},
有一个问题，使用官方给定的方法，在选中第二级市的时候，选中的那一几级不会给定选中的样式，目前不知道怎么解决。。
