vue mint-ui 三级地址联动

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

刚开始的时候 我还以为直接用select来写 后来公司的ios告知并不是这样的

他说应该时这样的

vue mint-ui 三级地址联动

于是第一想法 赶紧找插件吧

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

但是不怎么好用 于是乎他又让我用了这个插件

首先使用方法

可以参考官网 http://mint-ui.github.io/#!/zh-cn 这里不多说了 因为下面还有很多内容

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

自己整理的思路时正确的  但是怎么实现 实在是想不起来

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

于是我开始 找度姨

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

https://github.com/artiely/Administrative-divisions-of-China(里面包含二级联动数据,三级联动数据,四级联动数据等,找到自己需要的)

一、html组件

<div>
  <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
  <p>地址3级联动:{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</p>
</div>
二、组件方法
<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
格式自己整理吧(蜜汁微笑)
上一篇:EmguCV控件Emgu.CV.UI.ImageBox及C# picturebox显示图片连续刷新出现闪烁问题


下一篇:AtCoder Grand Contest 038 简要题解