vue mint-ui 三级地址联动

我也是第一次写这种地址联动的

刚开始的时候 我还觉得直接用select来写 后来公司的ios告知并非这样的

他说应该时这样的

因而第一想法 赶忙找插件吧

可是找了一会未果  就问了公司大神 他刚开始更我讲了滴滴的一个插件

可是不怎么好用 因而乎他又让我用了这个插件

首先使用方法

能够参考官网 http://mint-ui.github.io/#!/zh-cn 这里很少说了 由于下面还有不少内容

在一切准别就绪以后 你会发现官网上给的都很鸡肋 不多的东西

本身整理的思路时正确的  可是怎么实现 实在是想不起来

------------------------------------------------我是分界线--------------------------------------------

因而我开始 找度姨

首先你先找一个全国三级联动的地址json文件 

https://github.com/artiely/Administrative-divisions-of-China（里面包含二级联动数据，三级联动数据，四级联动数据等，找到本身须要的）

1、html组件

<div>

　　 <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"> </mt-picker>

　　<p>地址3级联动：{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</p>

</div>

2、组件方法

<script>

　　import { Picker } from 'mint-ui';

　　import myaddress from '../component/address3.json'

　　export default {

　　　　name: '',

　　　　components: {

　　　　'mt-picker': Picker

　　},

　　props: {},

　　data () {

　　　　return {

　　　　　　isShowAddress:false,

　　　　　　myAddressSlots: [

　　　　　　　　{

　　　　　　　　　　flex: 1,

　　　　　　　　　　defaultIndex: 1,

　　　　　　　　　　values: Object.keys(myaddress), //省份数组

　　　　　　　　　　className: 'slot1',

　　　　　　　　　　textAlign: 'center'

　　　　　　　　}, {

　　　　　　　　　　divider: true,

　　　　　　　　　　content: '-',

　　　　　　　　　　className: 'slot2'

　　　　　　　　}, {

　　　　　　　　　　flex: 1,

　　　　　　　　　　values: [],

　　　　　　　　　　className: 'slot3',

　　　　　　　　　　textAlign: 'center'

　　　　　　　　},{

　　　　　　　　　　divider: true,

　　　　　　　　　　content: '-',

　　　　　　　　　　className: 'slot4'

　　　　　　　　},{

　　　　　　　　　　flex: 1,

　　　　　　　　　　values: [],

　　　　　　　　　　className: 'slot5',

　　　　　　　　　　textAlign: 'center'

　　　　　　　　}

　　　　　　],

　　　　　　myAddressProvince:'',

　　　　　　myAddressCity:'',

　　　　　　myAddresscounty:'',

　　　　}

　　},

　　created() {

　　},

　　methods: {

　　　　goBack (){

　　　　　　this.$router.go(-1)

　　　　},

　　　　closeShowAddress (e){

　　　　　　if(e.target == this.$refs.selectAddress){

　　　　　　　　this.isShowAddress = !this.isShowAddress;

　　　　　　}

　　　　},

　　　　onMyAddressChange(picker, values) {

　　　　　　if(myaddress[values[0]]){ //这个判断相似于v-if的效果（能够不加，可是vue会报错，很不爽）

　　　　　　　　picker.setSlotValues(1,Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组，当前省的数组

　　　　　　　　picker.setSlotValues(2,myaddress[values[0]][values[1]]); // 区/县数据就是一个数组

　　　　　　　　this.myAddressProvince = values[0];

　　　　　　　　this.myAddressCity = values[1];

　　　　　　　　this.myAddresscounty = values[2];

　　　　　　}

　　　　},

　　　},

　　mounted(){

　　　　this.$nextTick(() => { //vue里面所有加载好了再执行的函数 （相似于setTimeout）

　　　　　　this.myAddressSlots[0].defaultIndex = 0

　　　　　　// 这里的值须要和 data里面 defaultIndex 的值不同才可以初始化

　　　　　　//由于我没有看过源码（我猜想是由于数据没有改变，不会触发更新）

　　　　});

　　}

}

</script>

 好了 帮你们整理好格式了 好看一点 真爱啊

对了 使用的时候注意一点 就是你的address.json 我刚开始复制这个的时候一直把这个json外部写一个【】

而后一直不出来汉字 只有第一列是数字 而后以为本身好白痴

反正你把这些写上去就会有上图的效果了

——————————————补充——————————————

还有一些朋友不太明白我写的，出现了各类问题，我刚才又整理了一遍。再详细一些（我只能这样了）。

别忘记引入mint-ui的文件（但愿你们学会看文档鸭~）

<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">

<!-- 引入组件库 -->

<script src="https://unpkg.com/mint-ui/lib/index.js"></script>

 

有的人出现的问题是由于address.json文件的问题，其实人家已经把下载地址写在上面了 ，为啥木有人看捏 （哭死啊）

我这里把三级联动的文件发出来吧 因为文章已经很长了 我会单独写一篇文章  有须要的直接复制就能够了

唉呀妈呀 当仙女可真累啊

三级联动json文件地址：https://www.cnblogs.com/WoAiZmm/p/10001426.html

格式本身整理吧（蜜汁微笑）