vue 城市选择 element-china-area-data

小猿L

已于 2024-04-16 21:07:23 修改

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue踩坑经验累积 elementui那些小九九文章标签： vue elementui

于 2022-11-09 18:31:31 首次发布

本文链接：https://blog.csdn.net/enhenglhm/article/details/127775268

vue踩坑经验累积同时被 2 个专栏收录

13 篇文章

订阅专栏

elementui那些小九九

8 篇文章

订阅专栏

本文档介绍了如何利用ElementUI的中国省市区级联数据实现三级联动效果。首先通过npm安装element-china-area-data，然后在Vue3项目中导入并赋值给级联选择器，设置相关属性如value、label和expandTrigger，最后展示实现的页面效果。提供了一个详细的步骤参考链接，帮助开发者快速实现这一功能。

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

需求:实现省市区级联三级联动

实现：使用了Element UI 中国省市区级联数据

一、安装

npm install element-china-area-data -S

二、使用（我这里是vue3写法，仅供参考）

import { regionData } from 'element-china-area-data';

//赋值給级联选择器
const options = regionData;

html使用element-plus(记得绑定v-model)

 <el-cascader
            style="width: 300px"
            v-model="region"
            :options="options"
            :props="{ value: 'label', label: 'label', expandTrigger: 'hover' }"
            clearable
          ></el-cascader>

三、效果