vue3 使用 element-china-area-data 实现地区选择器

编程（变成）小辣鸡

已于 2025-01-05 23:03:58 修改

阅读量1.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： npm vue.js 前端 elementui

于 2023-05-20 09:41:11 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_52803316/article/details/130777979

vue 专栏收录该内容

10 篇文章

订阅专栏

文章介绍了如何引入element-china-area-datanpm包的v6版本，并在页面中引用el-cascader组件来实现省/市的二级联动效果。通过change事件获取省编码和市编码，并利用codeToText转换为中文名称。

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

1、引入依赖包

npm install element-china-area-data

2、页面引用

我引用的是v6版本，组件有改动

官网：element-china-area-data - npm

下面用例：使用的是二级联动数据

<el-form-item label="省/市" label-width="130px" style="width: 100%;">
        <el-cascader :options="options" @change="handleChange"></el-cascader>
</el-form-item

<script setup>

import { provinceAndCityData, codeToText } from 'element-china-area-data'

      let options=ref(provinceAndCityData);

const handleChange= (value)=> {
let provinceCode=value[0]; //省编码
let cityCode=value[1]   //市编码

let province= codeToText[value[0]];  //省中文

          let city= codeToText[value[1]];  //市中文
}

</script>