vue+axios+element-ui实战（四）-- 中国省市区级联选择

在开发中经常会遇到省市区级联动选择的需求，由于element-ui的省市区级联数据是另外独立的，所以我们还需要先安装依赖。

安装：

npm install element-china-area-data -S

在页面中引入：

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

其中：

1、 provinceAndCityData是省市二级联动数据（不带“全部”选项）；

2、regionData是省市区三级联动数据（不带“全部”选项）；

3、provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）；

4、regionDataPlus是省市区三级联动数据（带“全部”选项）；

5、"全部"选项绑定的value是空字符串""；

6、CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市；

7、TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105。

代码示例：

开发中我们一般需要将区域码转为汉字传给后台，通过change事件，我们可以监听到绑定值：

handleChange(val) {
   console.log(val)
}

控制台打印结果如下：

然后通过CodeToText可以将区域码转为汉字：

handleChange(val) {
    console.log(CodeToText[val[0]])
    console.log(CodeToText[val[1]])
    console.log(CodeToText[val[2]])
}

比如我们选择河北省/唐山市/路南区，则控制台打印出：