Element UI 中国省市区级联数据

官网链接

这里写目录标题

• 安装
• 官网例子使用
• 根据后端返回地区code显示城市名称

安装

 npm install element-china-area-data -S

官网例子使用

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

1. provinceAndCityData是省市二级联动数据（不带“全部”选项）
2. regionData是省市区三级联动数据（不带“全部”选项）
3. provinceAndCityDataPlus是省市二级联动数据（带“全部”选项）
4. regionDataPlus是省市区三级联动数据（带“全部”选项）
5. “全部"选项绑定的value是空字符串”"
6. CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：

CodeToText['110000']   输出 北京市

7. TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：

TextToCode['北京市'].code	输出 110000
TextToCode['北京市']['市辖区'].code    输出 110100
TextToCode['北京市']['市辖区']['朝阳区'].code    输出 110105

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

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { provinceAndCityData } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: provinceAndCityData,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

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

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { provinceAndCityDataPlus } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: provinceAndCityDataPlus,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

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

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { regionData } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionData,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

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

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { regionDataPlus } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionDataPlus,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

根据后端返回地区code显示城市名称

• CodeToText使用：

CodeToText['110000']   输出 北京市
CodeToText['110105']   输出 朝阳区

需要上来说需要返回省市区，但是CodeToText只会返回最低层级地区码，因此需要翻译地区码。

// 地区码翻译 regionCode为后端返回地区码
getRegionCodeAry (regionCode) {
  let selectedOptions = [];

  // 获取地区码省市区组合
  if (this.isNull(regionCode)) {
    // 如果地区码为空，返回未注册信息
    return "还未完善注册地信息。";
  } else {
    // 地区码非空
    if (regionCode.substring(2, 6) === "0000") {
      selectedOptions[0] = regionCode;
    } else if (regionCode.substring(4, 6) === "00") {
      selectedOptions[0] = regionCode.substring(0, 2) + "0000";
      selectedOptions[1] = regionCode;
    } else {
      let province = regionCode.substring(0,2) + "0000";
      let city = regionCode.substring(0,4) + "00";
      selectedOptions[0] = province;
      selectedOptions[1] = city;
      selectedOptions[2] = regionCode;
    }

    // 根据省市区代码组合转化文本
    let regionAry = Object.values(selectedOptions);
    if (regionAry.length === 1) {
      return "中国-" + CodeToText[regionAry[0]];
    } else if (regionAry.length === 2) {
      return "中国-" + CodeToText[regionAry[0]] + "-" + CodeToText[regionAry[1]];
    } else if (regionAry.length === 3) {
      return "中国-" + CodeToText[regionAry[0]] + "-" + CodeToText[regionAry[1]] + "-" + CodeToText[regionAry[2]];
    }

  }
},

或者用正则表达式判断也行，我这里记一下正则表达式的哦

getRegionCodeAry (regionCode) {
   if (regionCode && regionCode.length == 6) {
     if (/^\d{2}0{4}$/.test(regionCode)) {
       // 省
       return [regionCode, '']
     } else if (/^\d{4}0{2}$/.test(regionCode)) {
       // 市
       let provinceCode = regionCode.substr(0, 2) + '0000'
       return [provinceCode, regionCode, '']
     } else {
       // 区
       let provinceCode = regionCode.substr(0, 2) + '0000'
       let cityCode = regionCode.substr(0, 4) + '00'
       return [provinceCode, cityCode, regionCode]
     }
   } else {
     // 全部
     return ['']
   }
 },