在element项目中,省市区三级联动的使用

783 阅读1分钟

在vue项目中使用省市区三级联动,最好的方法是借助 element-china-area-data 插件
第一步直接安装,在终端中执行
npm install element-china-area-data -S
下载element-china-area-data 插件
第二步,在需要使用到该功能的页面中,引入插件
import { regionData, CodeToText } from 'element-china-area-data' log打印一下regionData会得到父子嵌套的如下数据: ** 第一层是省级**

image.png\

第二层市级

image.png\

第三层区级的数据

image.png\

此时,配合element组件库中的Cascader级联选择器,\

<el-cascader v-model="value" :options="regionData" @change="handleChange"></el-cascader>\

regionDataoptions赋值,我们就得到想要的功能啦

image.png\

而第二个值CodeToText,从字面意义上就能知道,就是映射地区代码,与地区之间的关系,它log打印出的结果是这样的\

image.png

image.png
是一个扁平化后的结果对象,如果此时项目中需要用到数据回显,或者其他相关功能, 我们就可以利用这个数据,通过级联选择器获得的地区code值,==》**CodeToText[地区code值]**得到想要的省市区名称了