技术文档

打开导航菜单

PIG AI Guide
============

切换主题搜索

[](https://wwads.cn/click/bait)[![](https://cdn.wwads.cn/creatives/9UFEBWm9yghqfP2A3Ri7GzEqF8ccpKj2J0fHzhS7.png)
](https://wwads.cn/click/bundle?code=4jQpSYno5LBbz49BkpNUvNEIyc5l09)

[电商项目必备！Java 开源商城系统 SpringBoot+Vue 框架，功能齐全，全源码交付，可二开](https://wwads.cn/click/bundle?code=4jQpSYno5LBbz49BkpNUvNEIyc5l09)[广告](https://wwads.cn/?utm_source=property-270&utm_medium=footer "点击了解万维广告联盟")

PIGX 技术指南
=========

适配 5.0 以上单体和微服务版本

PIGX 技术指南PIG

⌘K

参与开发

快速上手

前端部分

浏览器兼容性前端配置项说明前端ENV环境配置前端目录结构前端首页组件开发前端国际化配置前端字体图标配置前端图表功能前端权限管理前端数据状态管理前端组件路由管理前端标签页管理前端字典工具使用前端参数工具使用前端通用工具函数省市区街四级联动组件前端代码编辑组件前端富文本组件前端表格组件前端表格分页组件前端表格工具栏组件前端上传组件前端左侧查询树前端文字提示组件前端悬浮输入组件前端组织架构组件前端标签列表组件前端表单校验

功能使用

后端部分

扩展必看

生产部署

社区分享

更新日志

更新日期: 2025-10-23

最后更新: 2025/8/19

切换主题

省市区街四级联动组件
==========

![](https://minio.pigx.top/oss/202305/1684049377.png)

[](#省市区三级联动)省市区三级联动
-------------------

```


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




```

```


`<china-area v-model="data"  @change="handleChange"/>;  
// 双向绑定数据 自动回显： 北京市/市辖区/东城区  const data =  ref("11,1101,110101");  
// 可选 输出： 11,1101,110101  const  handleChange  =  (val:  String)  =>  {  }` 




```

[](#属性说明)属性说明
-------------

| 属性名称 | 描述 | 类型 |
| --- | --- | --- |
| 

v-model

 | 

双向绑定

 | 

String

 |
| 

type

 | 

省级 1 市 2 区 3 街道 4

 | 

Number

 |
| 

plus

 | 

默认 false， 不用选择某级

 | 

Boolean

 |
| 

@change

 | 

选中回调事件

 | 

Function

 |

[](#完整区划数据)完整区划数据
-----------------

下载 [👉🏻 省市街区详细 SQL](https://minio.pigx.top/oss/202402/1708152046.sql)，导入至 sys\_area 表即可。

如果此数据（来自民政部 2023 年的数据）中不存在对应地区，您可以根据规则自行新增。请注意，编码需保持唯一。

### 本页导航

省市区三级联动

属性说明

完整区划数据