Element UI中国省市区级联数据(element-china-area-data)使用指南

原创于 2025-06-30 09:32:22 发布 · 911 阅读

3 ·

CC 4.0 BY-SA版权

Element UI中国省市区级联数据(element-china-area-data)使用指南

项目概述

element-china-area-data是一个专为Element UI设计的中国行政区划数据包，提供了完整的省、市、区三级联动数据，支持多种使用场景。该项目基于最新的行政区划数据，为开发者提供了开箱即用的解决方案。

安装与引入

安装方式

使用npm进行安装：

npm install element-china-area-data -S

引入方式

在项目中引入数据包：

import { 
  provinceAndCityData, 
  regionData, 
  provinceAndCityDataPlus, 
  regionDataPlus, 
  CodeToText, 
  TextToCode 
} from 'element-china-area-data'

对于服务端使用，可以采用以下方式：

const { 
  provinceAndCityData, 
  regionData, 
  provinceAndCityDataPlus, 
  regionDataPlus, 
  CodeToText, 
  TextToCode 
} = require('element-china-area-data/dist/app.commonjs')

数据模块详解

1. 基础数据模块

provinceAndCityData: 省市二级联动数据（不带"全部"选项）
regionData: 省市区三级联动数据（不带"全部"选项）
provinceAndCityDataPlus: 省市二级联动数据（带"全部"选项）
regionDataPlus: 省市区三级联动数据（带"全部"选项）

2. 辅助工具模块

CodeToText: 区域码转文本对象
- 示例：CodeToText['110000'] 返回 "北京市"
TextToCode: 文本转区域码对象
- 示例：TextToCode['北京市'].code 返回 "110000"
- 支持多级查询：TextToCode['北京市']['市辖区']['朝阳区'].code 返回 "110105"

实际应用示例

1. 省市二级联动（基础版）

<template>
  <el-cascader
    size="large"
    :options="options"
    v-model="selectedOptions"
    @change="handleChange">
  </el-cascader>
</template>

<script>
import { provinceAndCityData } from 'element-china-area-data'
export default {
  data() {
    return {
      options: provinceAndCityData,
      selectedOptions: []
    }
  },
  methods: {
    handleChange(value) {
      console.log('选中的值:', value)
    }
  }
}
</script>

2. 省市二级联动（带"全部"选项版）

<template>
  <el-cascader
    size="large"
    :options="options"
    v-model="selectedOptions"
    @change="handleChange">
  </el-cascader>
</template>

<script>
import { provinceAndCityDataPlus } from 'element-china-area-data'
export default {
  data() {
    return {
      options: provinceAndCityDataPlus,
      selectedOptions: []
    }
  },
  methods: {
    handleChange(value) {
      console.log('选中的值:', value)
    }
  }
}
</script>

3. 省市区三级联动（基础版）

<template>
  <el-cascader
    size="large"
    :options="options"
    v-model="selectedOptions"
    @change="handleChange">
  </el-cascader>
</template>

<script>
import { regionData } from 'element-china-area-data'
export default {
  data() {
    return {
      options: regionData,
      selectedOptions: []
    }
  },
  methods: {
    handleChange(value) {
      console.log('选中的值:', value)
    }
  }
}
</script>

4. 省市区三级联动（带"全部"选项版）

<template>
  <el-cascader
    size="large"
    :options="options"
    v-model="selectedOptions"
    @change="handleChange">
  </el-cascader>
</template>

<script>
import { regionDataPlus } from 'element-china-area-data'
export default {
  data() {
    return {
      options: regionDataPlus,
      selectedOptions: []
    }
  },
  methods: {
    handleChange(value) {
      console.log('选中的值:', value)
    }
  }
}
</script>