vue城市三級聯動組件 vue-area-linkage

Install the pkg with npm:

// v5以前的版本
npm i --save vue-area-linkage

// v5及以後的版本
npm i --save vue-area-linkage area-data

　　目前基本都是5以後的了

main.js中

import VueAreaLinkage from 'vue-area-linkage';

Vue.use(VueAreaLinkage)

　　組件中

import {pca, pcaa} from 'area-data'; // 城市數據
    import 'vue-area-linkage/dist/index.css'; // 樣式

 data () {
            return {
                pca: pca,
                pcaa: pcaa,
                selected2: '',
           }
}

d代碼

// v5以前的版本
<area-select v-model="selected"></area-select>
<area-cascader v-model="selected2"></area-cascader>

// v5及以後的版本
<area-select v-model="selected" :data="pca"></area-select> // 省市
// 省市區：<area-select v-model="selected" :data="pcaa"></area-select>
<area-cascader v-model="selected2" :data="pca"></area-cascader> // 省市
// 省市區：<area-cascader v-model="selected2" :data="pcaa"></area-cascader>

//setting
<area-select type='all' :level='2' v-model="selected" :data="pcaa"></area-select>
<area-cascader type='all' v-model="selected2" :level='1' :data="pcaa"></area-cascader>