Vue3 + Element Plus 实现省市区街道四级联动组件（附完整代码）-优快云博客

Vue3 + Element Plus 打造智能地址选择组件的实战指南

在现代化Web应用中，地址选择功能几乎是每个涉及用户信息的系统都不可或缺的基础组件。传统的三级联动（省市区）已经无法满足精细化数据采集的需求，特别是在物流、电商、政务等场景中，街道/乡镇级别的数据往往至关重要。本文将带你从零开始，基于Vue3和Element Plus框架，构建一个高性能、易用的四级联动地址选择组件。

1. 技术选型与项目准备

1.1 为什么选择Vue3 + Element Plus

Vue3的Composition API为我们提供了更好的逻辑组织和代码复用能力，特别适合构建复杂的交互组件。Element Plus作为目前最成熟的Vue3 UI库之一，其el-select和el-tabs等组件经过大量项目验证，能够显著提升开发效率。

核心依赖：

npm install vue@next element-plus chinese-to-pinyin lodash-es

1.2 行政区划数据源处理

四级联动的基础是完整的行政区划数据。推荐使用GitHub上开源的Administrative-divisions-of-China项目提供的数据：

// pcas-code.json 数据结构示例
[
  {
    "code": "110000",
    "name": "北京市",
    "children": [
      {
        "code": "110100",
        "name": "北京市",
        "children": [
          {
            "code": "110101",
            "name": "东城区",
            "children": [
              {"code": "110101001", "name": "东华门街道"}
            ]
          }
        ]
      }
    ]
  }
]

提示：实际项目中建议将这份数据(约3MB)通过后端API按需加载，而非直接打包到前端资源中。

2. 组件架构设计

2.1 核心交互流程

我们设计的组件需要支持两种主要操作模式：

层级选择：通过Tab页签逐级选择省→市→区→街道
模糊搜索：直接输入关键词快速定位地址

graph TD
    A[输入框点击] --> B{是否输入内容?}
    B -->|否| C[显示省份选择Tab]
    B -->|是| D[显示模糊搜索结果]
    C --> E[选择省份]
    E --> F[自动加载城市数据]
    F --> G[选择城市]
    G --> H[自动加载区县数据]
    H --> I[选择区县]
    I --> J[自动加载街道数据]
    J --> K[完成选择]

2.2 组件Props设计

const props = defineProps({
  // 已选地址名称（如"北京市/北京市/东城区/东华门街道"）
  modelValue: { type: String, default: "" },
  
  // 已选地址编码数组（如["110000", "110100", "110101", "110101001"]）
  codeArray: { type: Array, default: () => [] },
  
  // 是否启用模糊搜索功能
  enableSearc