基于mint-ui的城市选择3级联动

1、实际效果

2、首先你需要去下载一个包含中国省份，城市，区县的数据
如下：
https://github.com/artiely/Administrative-divisions-of-China（里面包含二级联动数据，三级联动数据，四级联动数据等，找到自己需要的）

https://github.com/modood/Administrative-divisions-of-China
（一个更好的中国地区数据，推荐用这个）

3、具体代码
主要是用到了mint-ui的picker组件，关于mint-ui的使用就自行看官网

Ⅰ 、html组件

<template>
  <div>
    <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
    <p>
      地址3级联动：{{ myAddressProvince }} {{ myAddressCity }}
      {{ myAddresscounty }}
    </p>
  </div>
</template>

Ⅱ 、组件方法

<script>
import { Picker } from "mint-ui";
import myaddress from "../assets/address3.json"; //引入省市区数据
console.log(myaddress);

export default {
  name: "",
  components: {
    "mt-picker": Picker
  },
  props: {},
  data() {
    return {
      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: {
    onMyAddressChange(picker, values) {
      console.log(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]]); //  区/县数据就是一个数组

        console.log("省", picker.getSlotValues(0), picker.getSlotValue(0));
        console.log("市", picker.getSlotValues(1), picker.getSlotValue(1));
        console.log("区/县", picker.getSlotValues(2), picker.getSlotValue(2));
        console.log(picker.getValues());

        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>

picker 中的方法

method: {
  slotValueChange () {}, // 触发 picker 的 change 事件
  getSlot (slotIndex) {}, // 过去某一列 slot
  getSlotValue (index) {}, // 获取某一列 slot 的当前值
  setSlotValue (index, value) {}, // 设置某一列 slot 的当前值
  getSlotValues (index) {}, // 获取 slot 的 values
  setSlotValues (index, values) {}, // 设置 slot 的 values
  getValues () {}, // 获取多个组件合成的值
  setValues (values) {} // 同时设置多列 slot 的值
}