mint ui 地址三联动

首先 需要一份地址的json文件,GitHub - zhijianxuanlv/PCDPlist 包含了一份address.json 文件

如果你还是一位iOSer 那么可以通过xcode 自己生成一份符合公司数据库json文件,PCDPlist项目生成plist文件 需要在转化成json文件。有网站可以进行这个操作。

正文

如果你的前端项目使用了 mintui 这个组件的话 那么项目中地址三联动一定少不了了。

废话少说 上代码

1

坑1 一定要注意 这里面valueKey 这个值的设定 需要让你的省市区json数据 都是相同的key value 例如 省 {"id": "654300", "name": "\u963f\u52d2\u6cf0\u5730\u533a"},那么市也需要满足这种条件 市{"id": "654300", "name": "\u963f\u52d2\u6cf0\u5730\u533a"},区也是这样{"id": "654300", "name": "\u963f\u52d2\u6cf0\u5730\u533a"}

设置数据源


mint ui 地址三联动_第1张图片
2

注意方法 组件mt-picker  api @change="onNewAddressChange 


mint ui 地址三联动_第2张图片
3

坑2 一定要判断values[1]和value[2] 要判断是否是 undefined 要不然项目报错 

最后 设置piker 默认选中  mounted() {

    this.$nextTick(() => {

      // this.myAddressSlots[0].defaultIndex = 0; //

    });

你可能感兴趣的:(mint ui 地址三联动)