Vue插件element-plus-china-area全国行政区联动(含港澳台)

置顶宛城第五圣

已于 2024-01-19 14:00:15 修改

阅读量777

点赞数

文章标签： vue.js 前端 javascript

于 2023-10-31 13:40:09 首次发布

本文链接：https://blog.csdn.net/qq_43542296/article/details/134138223

版权

一、安装

npm install element-plus-china-area -S

二、引入

vue组价中引入：

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

js服务端中引入：

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

数据来源及解释：

2021年统计用区划代码和城乡划分代码（截止时间：2021-10-31，发布时间：2021-12-30）

三、使用案例

1.省市二级联动（不带“全部”选项）

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

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

2.省市二级联动（带“全部”选项）

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

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

3.省市区三级联动（不带“全部”选项）

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

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

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

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

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

四、注意事项

1.第1、2级个别查询场景的注意事项

举个栗子：对于查询条件北京-直辖市-null，如果数据库某条区级为东城区的记录只记录了省级为北京市（未记录市辖区-东城区），则对于查询条件北京市-直辖市-null，将查不出该条记录，实际上应该查出来。

重庆市除外，因为重庆市第2级不光有市辖区，还有县，不存在上述问题：

经排查，下面三个直辖市存在上述问题，需要特殊处理：

北京市-null-null 等同于北京市-直辖市-null，北京市-直辖市-null 应归为北京市-null-null

天津市-null-null 等同于天津市-直辖市-null，天津市-直辖市-null 应归为天津市-null-null

上海市-null-null 等同于上海市-直辖市-null，上海市-直辖市-null 应归为上海市-null-null

2.第2、3级个别查询场景的注意事项

举个栗子：

对于查询条件河南省-省直辖县级行政区划-济源市，如果数据库某条区级为济源市的记录只记录了省级为河南省，市级为省直辖县级行政区划（未记录济源市），则对于查询条件河南省-省直辖县级行政区划-济源市，将查不出该条记录，实际上应该查出来。

海南省、湖北省则不存在这样的问题，因为它们的省直辖县级行政区划有多个，而不是只有一个，不存在上述问题：

另外，在省直辖县级行政区划以外的其它所有市级行政区划中，如果某主体下也只有1个区级的三级行政区划，也将存在上述问题，需要特殊处理。