【Vue】Vue+ElementUI中城市选择器的使用

Vue+ElementUI中城市选择器 vue-area-linkage 的使用

1. 参考网址 ： 安装依赖以及配置
2. 参考网址：数据来源问题报错，解决办法
3. 参考网址：显示样式问题解决办法

1. vue-area-linkage

1. 省市区联动选择. 组合数据来源 area-data

1.1 Installation

1. Install the pkg with npm:

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

// v5及之后的版本
npm i --save vue-area-linkage area-data

2. or yarn

// v5之前的版本
yarn add vue-area-linkage

// v5及之后的版本
yarn add vue-area-linkage area-data

1.2 Usage

1. 在main.js中导入，进行全局注册。

import Vue from 'vue';
import 'vue-area-linkage/dist/index.css'; // v2 or higher
import VueAreaLinkage from 'vue-area-linkage';

Vue.use(VueAreaLinkage)

2. 导入数据来源 ，在需要使用的页面。并在data()中 创建对应的参数进行接收即可。

import { pca, pcaa } from 'area-data'; // v5 or higher
 		
 data() {
 	return {
 		selected:[], // 接收数据的对象
        pca: pca,
        pcaa: pcaa
 	}
 }

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

2. 遇到问题一 ： 没有数据

1. 此时需要在页面中导入数据：

 import { pca, pcaa } from 'area-data' // v5 or higher

		selected:[],
        pca: pca,
        pcaa: pcaa

3. 样式问题：

1. 解决该问题需要进入到
   修改如下代码 ：