循序渐进VUE+Element 前端应用开发(21）--- 省市区县联动处理的组件使用

• 1、基于element-china-area-data 第三方组件的使用

• 2、基于v-region控件省市区街道选择组件

• 3、自定义省市区的组件

在很多应用中，往往都涉及到记录用户所在省份、城市、区县或者街道等信息，一般我们可以通过联动的Select或者类似的界面组件进行展示，或者使用Element中的el-cascader界面组件进行展示，而全国的省份、城市、区县或者街道等信息我们可以通过官方的数据进行获取，可以直接存放在JS里面，也可以存储在自己的数据库里面，最后统一进行联动展示即可。本篇随笔介绍几种组件对省市区县联动处理的效果及做法，可以直接应用在我们项目中，也可以做为一个组件开发的参考学习。

1、基于element-china-area-data 第三方组件的使用

================================================================================================

在github往往有很多我们需要的开源组件，我们可以拿来直接使用，如这个地址是：https://github.com/Plortinus/element-china-area-data ，在Vue+Element的项目中，直接通过npm进行安装组件即可：

npm install element-china-area-data -S

然后在页面组件中引入对象数据，绑定在el-cascader界面组件即可。

import { provinceAndCityData, regionData, rovinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from ‘element-china-area-data’;

例如界面代码如下所示。

3. 三级联动（不带“全部”选项）

<el-cascader

v-model=“selectedOptions2”

class=“long”

size=“large”

:options=“regionData”

@change=“handleChange”

/>

绑定值：{ { selectedOptions2 }}

区域码转汉字：{ { CodeToText[selectedOptions2[0]] }},{ { CodeToText[selectedOptions2[1]] }},{ { CodeToText[selectedOptions2[2]] }}

汉字转区域码：{ { convertTextToCode(CodeToText[selectedOption