# china-area-data

**Repository Path**: dunkop/china-area-data

## Basic Information

- **Project Name**: china-area-data
- **Description**: 省市区镇三四级联动
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-10-11
- **Last Updated**: 2024-11-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

**说明**

省市区镇联动

data: 省市区镇数据

- province.js: 省/直辖市
- city.js: 直辖市/市
- county.js: 区
- town.js: 镇
- my-pcas.json: 加工好的数据，可以在 element-ui 的 el-cascader 和 el-select 当中进行使用

src: 项目当中的代码

- china-area: 封装好的工具，可以直接导入到项目当中使用
- index.js: 方法，就是生成 my-pcas.json 的代码，此处可以根据需求更改逻辑

**其他**

推荐的插件

| 插件名称                | 开源地址                                              |
| ----------------------- | ----------------------------------------------------- |
| element-china-area-data | https://www.npmjs.com/package/element-china-area-data |
| v-region                | https://www.npmjs.com/package/v-region                |

element-china-area-data 没有找到四级联动，在其源码当中，dist/pcas-code.json 当中可以看到有四层结构，第四层就是镇信息。

v-region 非常完美，就是UI不太好看

关于它们的使用方式，可以在网上搜索，或者在开源地址上面，我这里使用 vue2 的语法

```txt
【A】element-china-area-data

//局部导入数据
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";
// 解释
- provinceAndCityData 省市二级联动数据,汉字+code
- regionData 省市区三级联动数据
- pcTextArr 省市联动数据，纯汉字
- pcaTextArr 省市区联动数据，纯汉字
- codeToText 是个大对象，属性是区域码，属性值是汉字 用法例如：codeToText['110000'] 输出北京市


【B】v-region@

// 局部导入组件
import { RegionSelects, RegionColumns, RegionCityPicker, RegionColumnsCore } from 'v-region'
// html 使用
<region-columns
  v-model="selectedVRegionColumns"
  :town="false"
  @change="regionChange"
/>
<region-selects
  v-model="selectedVRegion"
  :town="true"
  @change="regionChange"
/>
// script 响应式
data() {
   return {
      selectedVRegion: {
        province: '',
        city: '',
        area: '',
        town: ''
      },
      selectedVRegionColumns: {
        province: '',
        city: '',
        area: '',
        town: ''
      }
   }
}
```







src/china-area/index.vue 呈现的效果

![image-20241011145142534](./images/image-20241011145142534.png)