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

原创已于 2025-01-05 23:03:58 修改 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#npm #vue.js #前端 #elementui

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

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>