如何快速实现Element UI省市区联动？2025最新中国地区数据解决方案

如何快速实现Element UI省市区联动？2025最新中国地区数据解决方案

【免费下载链接】element-china-area-data :cn: Element UI && antd Cascader级联选择器 中国省市区三级、二级联动option数据 项目地址: https://gitcode.com/gh_mirrors/el/element-china-area-data

element-china-area-data是专为Element UI和antd Cascader级联选择器打造的中国地区数据插件，提供精准的省市区三级、二级联动option数据，帮助开发者轻松集成地区选择功能。无论是电商收货地址、物流管理系统还是地方服务平台，都能通过这款免费工具快速实现专业级地址联动效果。

🚀 一秒上手！Element UI地区联动的核心优势

✅ 多种数据格式，满足不同场景需求

该项目提供两类核心数据结构，覆盖绝大多数开发场景：

• 基础数据：provinceAndCityData（省市二级）、regionData（省市区三级）包含汉字与区域码，支持数据回显与提交
• 纯文本数据：pcTextArr（省市）、pcaTextArr（省市区）纯汉字数组，适合仅需展示场景

✅ 区域码与汉字互转神器

内置codeToText对象实现区域码与汉字快速转换，例如：

codeToText['110000'] // 输出"北京市"

✅ 轻量高效，性能无忧

Element UI级联选择器加载中国地区数据的实时演示效果

💻 3步完成安装配置（2025最新版）

1️⃣ 一键安装依赖

使用npm快速安装：

npm install element-china-area-data -S

2️⃣ 按需引入数据模块

根据项目需求选择引入：

import {
  provinceAndCityData,  // 省市二级数据（含编码）
  pcTextArr,            // 省市二级纯文本
  regionData,           // 省市区三级数据（含编码）
  pcaTextArr,           // 省市区三级纯文本
  codeToText            // 区域码转汉字工具
} from "element-china-area-data";

3️⃣ 简单配置即可使用

以省市区三级联动为例，只需几行代码：

<template>
  <el-cascader
    size="large"
    :options="regionData"
    v-model="selectedOptions"
    placeholder="请选择省市区">
  </el-cascader>
</template>

<script>
import { regionData } from 'element-china-area-data'
export default {
  data() {
    return {
      regionData,
      selectedOptions: []
    }
  }
}
</script>

📱 实战案例：打造电商级地址选择器

场景1：省市二级联动（适合直辖市场景）

<template>
  <el-cascader
    :options="provinceAndCityData"
    v-model="selectedOptions">
  </el-cascader>
</template>

<script>
import { provinceAndCityData } from 'element-china-area-data'
export default {
  data() {
    return {
      provinceAndCityData,
      selectedOptions: []
    }
  }
}
</script>

场景2：纯文本展示型选择器

适用于仅需展示地址，无需提交编码的场景：

<template>
  <el-cascader
    :options="pcaTextArr"
    v-model="selectedOptions">
  </el-cascader>
</template>

<script>
import { pcaTextArr } from 'element-china-area-data'
export default {
  data() {
    return {
      pcaTextArr,
      selectedOptions: []
    }
  }
}
</script>

⚡️ v6版本重大更新（开发者必看）

🔥 核心改进

• 全面支持ESM和CommonJS模块系统
• 新增纯文本数据类型，减少数据处理步骤
• 采用最新行政区划数据源，确保数据准确性

🔄 迁移指南

旧版本用户注意：

• CodeToText已重命名为codeToText（首字母小写）
• 移除Plus系列数据，全选功能请使用级联组件自身API
• 特殊地区数据已优化，确保数据完整性

📚 官方资源与支持

开发测试命令

项目提供完整开发工具链：

• npm run dev：启动开发服务器
• npm run test：运行单元测试
• npm run build：生成生产环境 bundles

数据来源

项目数据源自Administrative-divisions-of-China，确保行政区划代码与国家最新标准同步。

通过element-china-area-data，开发者可以告别繁琐的地区数据维护工作，将更多精力投入核心业务开发。这个轻量级工具已帮助数万个项目实现专业级地址选择功能，是Vue生态中处理中国地区数据的首选解决方案。

【免费下载链接】element-china-area-data :cn: Element UI && antd Cascader级联选择器 中国省市区三级、二级联动option数据 项目地址: https://gitcode.com/gh_mirrors/el/element-china-area-data