mint-ui 通过popup和picker实现三级联动（编辑时设置默认值）

成果预览：

准备工作：

请有针对性的查看以下文档：vue组件以及父子组件传值、mint-ui中的popup和picker。（本文不涉及，请自行查阅）

省市区三级数据源：https://github.com/artiely/Administrative-divisions-of-China  (由于业务需要，我使用的公司统一数据，但格式不变)

实现代码：

在对应的文件目录下新建：addressEdit.vue文件，以实现上放预览图页面。其中省市区联动部分引用公用组件：addressPicker.vue。

代码如下：

addressEdit.vue

addressPicker.vue

 

以上代码并不算完。你会发现此时三级联动已经可以了，并可以进行地址的添加，但是编辑的时候如何设置默认值（预览图3）

思路就是如果当前页面是编辑页面。那么重新对以下三个参数进行修改

思路：拿到父组件传过来的省市区，然后去判断当前省市区在三个数组中的索引值分别是什么，对应在data中的slots中设置 defaultIndex， value两个参数用于设置默认索引和默认值。如图：