vue-area-linkage

點這裡看demo：https://dwqs.github.io/vue-area-linkage/

安裝

這裡安裝v5之後的版本  

npm i --save vue-area-linkage area-data

在mian.js裡面註冊

import VueAreaLinkage from 'vue-area-linkage';

import 'vue-area-linkage/dist/index.css'; 

Vue.use(VueAreaLinkage);

然後再具體使用的頁面引入

    import { AreaCascader } from "vue-area-linkage"
    import { pca, pcaa } from 'area-data';

同時data資料中定義

selected: [], //陣列對應的就是選中的那個省市區。根據type來確定是省市區漢字的陣列還是編碼組成的陣列。
              //selected[0]省。selected[1]市。selected[2]區。
pca: pca,
pcaa: pcaa

使用，可以選擇兩種方式來寫都行。

1，使用area-select 來寫
<area-select v-model="selected" :data="pca"></area-select> // 省市
// 省市區：<area-select v-model="selected" :data="pcaa"></area-select>

2，使用area-cascader 來寫
<area-cascader v-model="selected2" :data="pca"></area-cascader> // 省市
// 省市區：<area-cascader v-model="selected2" :data="pcaa"></area-cascader>
 

area-select 元件   type可以指定返回的資料格式的型別是編碼還是中文

v4 僅支援省市區聯動，即 v4 不再支援 level 的值為 3(省市區街聯動)

area-cascader 元件

獲取預設值。只能靠編碼來顯示，如果你只寫對應的中文根本顯示不出來啊。所以介面的資料是對應編碼。     

                    this.selected[0] = pcaa[86][res.data.addrprovinceid];     //res.data.addrprovinceid省對應的id
                    this.selected[1] = pcaa[res.data.addrprovinceid][res.data.addrcityid];  //res.data.addrcityid省對應的id
                    this.selected[2] = pcaa[res.data.addrcityid][res.data.addrcountyid];    //res.data.addrcountyid省對應的id