vue基於mint-ui的城市選擇3級聯動的樣本，vuemint-ui3級聯動

vue基於mint-ui的城市選擇3級聯動的樣本，vuemint-ui3級聯動

項目是基於 vue2 的移動端項目

1、實際效果

地址三級聯動 mint-ui picker.png

2、首先你需要去下載一個包含中國省份，城市，區縣的資料

如下：

https://github.com/artiely/Administrative-divisions-of-China（裡麵包含二級聯動資料，三級聯動資料，四級聯動資料等，找到自己需要的）

3、具體代碼
主要是用到了mint-ui的picker組件，關於mint-ui的使用就自行看官網

Ⅰ 、html組件

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

Ⅱ 、組件方法

<script>  import { Picker } from 'mint-ui';  import myaddress from '../../../static/address3.json'     //引入省市區資料  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) {       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>

參考文章http://www.bkjia.com/article/125935.htm（mint-ui picker 的四級聯動）

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。