关于VUE+MintUI的picker省市区三级联动以及回显

最近一直在忙公司的项目,记录工程中出现的一些记得住的小问题
1.关于MintUI中的picker的使用
首先是项目要求:做一个关于收货地址的增删改查页面,其中涉及区域选择,这里我们采用的MintUI的picker

先看项目效果图(添加)
只有点击确认,城市的值才会保存

推荐网址地址 https://www.cnblogs.com/WoAiZmm/p/8413604.html
刚开始我是按照这个网址做出了基本配置,但是配完之后,老大给了我一个JSOn文件格式,说这是咱们地址区域选择的json…然后…不多说了,直接上图

,**

如果你的格式是一种的话,完全可以参考上面发的网址,如果是我们这样的,你可以试试我的方法…value-key=“p” 用于取根据map取key值,所以我把json字符串中的c和s全部替换成了p,因为json文件中北京和天津的市区全是直辖市,所以会出现得点击一下,区级才能联动的效果,考虑了一下有可能是缓存的问题,所以我之间在北京的直辖市后面加了一个空格…但是在页面上是看不出来的,所以效果就实现了,传值的时候,请记得去除市区的空格.
json文件地址格式:https://blog.csdn.net/qq_31334119/article/details/86741959

添加页面

收货地址修改:打开picker默认设置初识选中值设置
效果图

点击修改,进入界面,点击区域修改,默认打开是穿过来的值,点击确定,值才会被修改,否则点击其他地方关闭弹框,打开依然上上回点击确定打开的值

列表传值:

editAddress (addressInfo) {
console.log(addressInfo)
this.$router.push({name: ‘addressEdit’, params: { ‘addressInfo’: addressInfo }})
},

格式

addressList: [
{
addressID: 1,
province: ‘江西省’,
city: ‘南昌市’,
region: ‘东湖区’,
detail: ‘打开撒卡拉拉的1栋12号’,
default: ‘Y’,
consignee: ‘张三’,
mobile: ‘11234567890’
}
]