vue mint-ui 三級地址聯動

我也是第一次寫這種地址聯動的

剛開始的時候 我還覺得直接用select來寫 後來公司的ios告知並非這樣的

他說應該時這樣的

因而第一想法 趕忙找插件吧

可是找了一會未果  就問了公司大神 他剛開始更我講了滴滴的一個插件

可是不怎麼好用 因而乎他又讓我用了這個插件

首先使用方法

能夠參考官網 http://mint-ui.github.io/#!/zh-cn 這裏很少說了 由於下面還有不少內容

在一切準別就緒以後 你會發現官網上給的都很雞肋 不多的東西

本身整理的思路時正確的  可是怎麼實現 實在是想不起來

------------------------------------------------我是分界線--------------------------------------------

因而我開始 找度姨

首先你先找一個全國三級聯動的地址json文件 

https://github.com/artiely/Administrative-divisions-of-China（裏面包含二級聯動數據，三級聯動數據，四級聯動數據等，找到本身須要的）

1、html組件

<div>

　　 <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"> </mt-picker>

　　<p>地址3級聯動：{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</p>

</div>

2、組件方法

<script>

　　import { Picker } from 'mint-ui';

　　import myaddress from '../component/address3.json'

　　export default {

　　　　name: '',

　　　　components: {

　　　　'mt-picker': Picker

　　},

　　props: {},

　　data () {

　　　　return {

　　　　　　isShowAddress:false,

　　　　　　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: {

　　　　goBack (){

　　　　　　this.$router.go(-1)

　　　　},

　　　　closeShowAddress (e){

　　　　　　if(e.target == this.$refs.selectAddress){

　　　　　　　　this.isShowAddress = !this.isShowAddress;

　　　　　　}

　　　　},

　　　　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];

　　　　　　}

　　　　},

　　　},

　　mounted(){

　　　　this.$nextTick(() => { //vue裏面所有加載好了再執行的函數 （相似於setTimeout）

　　　　　　this.myAddressSlots[0].defaultIndex = 0

　　　　　　// 這裏的值須要和 data裏面 defaultIndex 的值不同纔可以初始化

　　　　　　//由於我沒有看過源碼（我猜想是由於數據沒有改變，不會觸發更新）

　　　　});

　　}

}

</script>

 好了 幫你們整理好格式了 好看一點 真愛啊

對了 使用的時候注意一點 就是你的address.json 我剛開始複製這個的時候一直把這個json外部寫一個【】

而後一直不出來漢字 只有第一列是數字 而後以爲本身好白癡

反正你把這些寫上去就會有上圖的效果了

——————————————補充——————————————

還有一些朋友不太明白我寫的，出現了各類問題，我剛纔又整理了一遍。再詳細一些（我只能這樣了）。

別忘記引入mint-ui的文件（但願你們學會看文檔鴨~）

<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">

<!-- 引入組件庫 -->

<script src="https://unpkg.com/mint-ui/lib/index.js"></script>

 

有的人出現的問題是由於address.json文件的問題，其實人家已經把下載地址寫在上面了 ，爲啥木有人看捏 （哭死啊）

我這裏把三級聯動的文件發出來吧 因爲文章已經很長了 我會單獨寫一篇文章  有須要的直接複製就能夠了

唉呀媽呀 當仙女可真累啊

三級聯動json文件地址：https://www.cnblogs.com/WoAiZmm/p/10001426.html

格式本身整理吧（蜜汁微笑）