vue的省市区选择 vue-area-linkage

先说想要的样式

安装的组件

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

在main.js里调用

import Vue from 'vue'
import VueAreaLinkage from 'vue-area-linkage'
Vue.use(VueAreaLinkage)

在要使用组件的地方调用

import 'vue-area-linkage/dist/index.css'
import { pca, pcaa } from 'area-data'

data中需要定义的变量

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

调用的方式

<area-cascader :level="1" type="text" placeholder="请选择地区" v-model='form.address' :data="pcaa"></area-cascader>

然后发现是这样的

改变下样式

.area-select.large{
  width: 100%;
  line-height: 20px;
}

结果
成功
最后说下省市是这样调用

<area-cascader v-model="selected2" :data="pcaa"></area-cascader>

三级联动是这样调用

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

二级联动

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