JLC Docs
PIG
AI
PIG
AI

省市区街四级联动组件

组件预览

省市区街四级联动组件界面

ChinaArea 组件提供省市区街四级联动选择功能，支持自动回显和级联选择。

省市区三级联动

引入组件

import { defineAsyncComponent } from 'vue';

const ChinaArea = defineAsyncComponent(
  () => import("/@/components/ChinaArea/index.vue")
);

基础用法

<template>
  <china-area v-model="data" @change="handleChange" />
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue';

const ChinaArea = defineAsyncComponent(
  () => import("/@/components/ChinaArea/index.vue")
);

// 双向绑定数据 自动回显：北京市/市辖区/东城区
const data = ref("11,1101,110101");

// 可选 输出：11,1101,110101
const handleChange = (val: string) => {
  console.log('选中的区域编码:', val);
};
</script>
数据格式

组件使用逗号分隔的区域编码字符串，格式为"省编码,市编码,区编码,街道编码"，支持自动回显对应的地区名称。

属性说明

属性名称描述类型默认值
v-model双向绑定String-
type省级 1 市 2 区 3 街道 4Number3
plus默认 false，不用选择某级Booleanfalse
@change选中回调事件Function-

级联层级配置

省级选择

只选择省级，设置 type 为 1：

<china-area v-model="provinceCode" :type="1" />

市级选择

选择到市级，设置 type 为 2：

<china-area v-model="cityCode" :type="2" />

区级选择（默认）

选择到区级，设置 type 为 3：

<china-area v-model="districtCode" :type="3" />

街道级选择

选择到街道级，设置 type 为 4：

<china-area v-model="streetCode" :type="4" />
数据依赖

使用街道级选择（type="4"）时，需要先导入完整的区划数据到 sys_area 表。

跳级选择

通过设置 plus 属性为 true，允许不选择某一级：

<china-area v-model="data" :type="3" :plus="true" />
应用场景

在某些业务场景下，用户可能只需要选择省和区，不需要选择市，此时可以使用 plus 模式。

完整区划数据

下载完整的省市区街四级数据，导入至数据库即可使用街道级联动功能。

数据来源

数据来自民政部 2023 年的官方行政区划数据，确保数据的准确性和权威性。

下载地址： 省市街区详细 SQL

数据导入步骤

  1. 下载 SQL 文件
  2. 连接到 MySQL 数据库
  3. 导入至 sys_area 表
-- 导入命令示例
mysql -u username -p database_name < 1708152046.sql

自定义区划数据

如果数据中不存在对应地区，您可以根据规则自行新增。

编码规则

新增区划数据时，编码需保持唯一，并遵循国家行政区划编码规范。

事件处理

监听选择变化事件：

<template>
  <china-area v-model="areaCode" @change="handleAreaChange" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const areaCode = ref('');

const handleAreaChange = (val: string) => {
  console.log('选中的区域编码:', val);
  // 可以在这里调用接口获取该区域的详细信息
};
</script>

回显示例

组件支持数据回显，传入区域编码即可自动显示对应的地区名称：

<template>
  <china-area v-model="editData" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 编辑时传入已保存的区域编码，组件会自动回显：北京市/市辖区/东城区
const editData = ref("11,1101,110101");
</script>
本页目录