Element UI 中国省市区级联数据

淡淡的烟草味﹌ 2023-01-13 01:45 128阅读 0赞

[官网链接][Link 1]

### 这里写目录标题 ###

*  安装
 *  官网例子使用
 *   *  省市二级联动（不带“全部”选项）:
     *  省市二级联动（带“全部”选项）:
     *  省市区三级联动（不带“全部”选项）：
     *  省市区三级联动（带“全部”选项）：
 *  根据后端返回地区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']   输出 北京市

1.  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 ['']
       }
     },

[Link 1]: https://www.npmjs.com/package/element-china-area-data