mint ui 地址三联动
2018-05-31 本文已影响0人
d2d7e89940eb
首先 需要一份地址的json文件,GitHub - zhijianxuanlv/PCDPlist 包含了一份address.json 文件
如果你还是一位iOSer 那么可以通过xcode 自己生成一份符合公司数据库json文件,PCDPlist项目生成plist文件 需要在转化成json文件。有网站可以进行这个操作。
正文
如果你的前端项目使用了 mintui 这个组件的话 那么项目中地址三联动一定少不了了。
废话少说 上代码

坑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"}
设置数据源

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

坑2 一定要判断values[1]和value[2] 要判断是否是 undefined 要不然项目报错
最后 设置piker 默认选中 mounted() {
this.$nextTick(() => {
// this.myAddressSlots[0].defaultIndex = 0; //
});