【巷子】---vue基於mint-ui三級聯動---【vue】

1、基本配置

　　https://github.com/modood/Administrative-divisions-of-China

　　三級聯動數據地址

2、vue基本配置

　　一、cnpm install mint-ui --save-dev

　　二、引入

　　　　import MintUI from 'mint-ui'

　　　　import 'mint-ui/lib/style.css';

　　　　Vue.use(MintUI);

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

<style>
</style>

<script>
import Vue from "vue";
import { Picker } from "mint-ui";
import myaddress from "../../data.json";
Vue.component(Picker.name, Picker);

export default {
  data() {
    return {
      myAddressSlots: [
        {
          flex: 1,//對應 slot CSS 的 flex 值
          defaultIndex: 1,//對應 slot 初始選中值，需傳入其在 values 數組中的序號，默認爲 0
          values: Object.keys(myaddress), //省份數組
          className: "slot1",//對應 slot 的類名
          textAlign: "center"//對應 slot 的對齊方式
        },
        {
          divider: true,//對應 slot 是否爲分隔符
          content: "-",//分隔符 slot 的顯示文本
          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) {
      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];

        /*
            setSlotValues(index, values)：設定給定 slot 的備選值數組
        
        */
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      //vue裏面所有加載好了再執行的函數 （相似於setTimeout）
      this.myAddressSlots[0].defaultIndex = 0;
      // 這裏的值須要和 data裏面 defaultIndex 的值不同纔可以初始化
      //由於我沒有看過源碼（我猜想是由於數據沒有改變，不會觸發更新）
    });
  }
};
</script>