vue 基於mint-ui 三級聯動

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>