一、基本配置

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

　　三級聯動數據地址

二、vue基本配置

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

　　2、引入

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>

?

轉載于:https://www.cnblogs.com/nanianqiming/p/9980069.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的【巷子】---vue基于mint-ui三级联动---【vue】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。