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

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

使用文档地址：https://www.npmjs.com/package/vue-area-linkage

安装依赖包：

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

在main.js里调用

import VueAreaLinkage from 'vue-area-linkage'

// 全局引用样式
import 'vue-area-linkage/dist/index.css'
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-cascader v-model="selected2" :data="pcaa"></area-cascader>

方式三：三级联动

searchData：接口参数，用户选择的内容直接同步到 searchData 中

<div class="wrap_area_select">
    <span class="Names">地区:</span>
    <area-select
        style="display: flex"
        type="all"
        v-model="searchData.areaList"
        :level="2"
        :disableLinkage="linkage"
        :data="pcaa"
    ></area-select>
</div>

<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>

修改样式：

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