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>

?

轉載于:https://www.cnblogs.com/haonanZhang/p/10613127.html

總結

以上是生活随笔為你收集整理的vue城市三级联动组件 vue-area-linkage的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。