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

最新推荐文章于 2025-04-16 16:55:42 发布

hxf6060

最新推荐文章于 2025-04-16 16:55:42 发布

阅读量2k

点赞数 1

文章标签： element-ui 省市区级联数据中国 vue

本文链接：https://blog.youkuaiyun.com/hxf6060/article/details/88821135

版权

本文介绍了在Vue项目中利用Element-UI实现省市区级联选择的详细步骤。首先，需要安装相关依赖并引入组件。Element-UI提供了不同级别的联动数据，如省市二级和省市区三级，同时考虑了是否包含“全部”选项的情况。通过绑定change事件，可以监听到选中的区域码，并将其转换为汉字，便于与后台交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发中经常会遇到省市区级联动选择的需求，由于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是空字符串""；

最低0.47元/天解锁文章