基于mint-ui，用Vue+webpack开发的省市级关联

业务需求，需要做做省市级关联的选择地址。用到的是mint-ui的picker，然后把全国的省市级做成json文件，放在static里。通过aixos调用。最难的是三层for循环，另外可能需要了解一下mint-ui的picker。具体代码如下。

代码里面的用到vuex大家可以自行取舍。

文件pick.vue 是业务的具体实现
<template>
  <div>
    <mt-picker :slots="slots" :showToolbar="true" :visible-item-count="5" @change="onValuesChange">

<!--这一段代码是选择省市级三列的选中的内容，可以自行取舍-->
      <div class="header">
        <button @click="sureAdd(1)">确定</button>    //这里是选择
        <button @click="sureAdd(2)">取消</button>    
      </div>
    </mt-picker>
  </div>
</template>
<script>
  import {Picker} from 'mint-ui';
  import axios from 'axios'

  export default {
    name: "Pick",
    data() {
      return {
        list: [],
        tranList: {
          province: "",
          city: "",
          town: ""
        },
        slots: [
          {
            flex: 1,
            values: [],
            className: 'slot1',
            textAlign: 'center',
            defaultIndex: 0
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: [],
            className: 'slot3',
            textAlign: 'center',
            defaultIndex: 0

          }, {
            divider: true,
            content: '-',
            className: 'slot4'
          },
          {
            flex: 1,
            values: [],
            className: 'slot5',
            textAlign: 'center'
          }
        ]
      };
    },
    methods: {
      onValuesChange(picker, values) {

        var selectCity = [];
        var selectTown = [];
        for (let i = 0; i < this.list.length; i++) {
          //判断省份与城市相等
          if (values[0] == this.list[i].name) {
            for (let j = 0; j < this.list[i].city.length; j++) {
              selectCity.push(this.list[i].city[j].name);
              //判断城市与县城（区）相等
              if (values[1] == this.list[i].city[j].name) {
                for (let k = 0; k < this.list[i].city[j].area.length; k++) {
                  selectTown.push(this.list[i].city[j].area[k])
                }
              }
            }
            break
          }
        }
        picker.setSlotValues(1, selectCity);
        picker.setSlotValues(2, selectTown);
        this.tranList.province = values[0];  //取出省份
        this.tranList.city = values[1];    //取出城市
        this.tranList.town = values[2];   //取出县，区
        this.$store.commit("tranList", this.tranList)
      },
      getInfo() {
//此处city.json 已经集成了全国各省市的信息
        axios.get("../../static/json/city.json").then(res => {
          for (let i = 0; i < res.data.length; i++) {
            this.slots[0].values.push(res.data[i].name)
          }
          this.list = res.data
        })
      },
      sureAdd(value) {
        if (value == 1) {
          this.$emit("controlShow", 1)
        }

        this.$emit("controlShow", 2)
      }
    },
    mounted() {
      this.getInfo()
    }
  }
</script>

然后可以在其他地方调用这个组件
如demo.vue 可以调用pick.vue
<template>
<pick v-if="show2" @controlShow="parentList"></pick>
</template>
<script>
components: {
  pick
},
</script>

其中city.json

具体效果如下