1. 程式人生 > >vue-area-linkage Vue省市區三級列表聯動外掛使用

vue-area-linkage Vue省市區三級列表聯動外掛使用

官方演示地址

     // v5及之後的版本 資料依賴於area_data
        npm i --save vue-area-linkage area-data
        import Vue from 'vue';
        import { pca, pcaa } from 'area-data'; // v5 or higher
        import 'vue-area-linkage/dist/index.css'; // v2 or higher
        import VueAreaLinkage from 'vue-area-linkage';

        Vue.use(VueAreaLinkage)
        
// 使用 // 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>

下面個人資訊頁面使用三級列表demo

 

 

 

 

文件地址