vue element-china-area-data使用详解

vue element-china-area-data使用详解

vue element-china-area-data使用详解
城市选择器插件参考：https://www.npmjs.com/package/element-china-area-data

使用前提vue相关配置已准备好
安装

npm install element-china-area-data -S

使用时在scrip中先进行引用在使用

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

provinceAndCityData是省市二级联动数据（不带“全部”选项）
regionData是省市区三级联动数据（不带“全部”选项）regionData是省市区三级联动数据（不带“全部”选项）
provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
regionDataPlus是省市区三级联动数据（带“全部”选项）
“全部"选项绑定的value是空字符串”"
CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市
TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105

具体使用引用地址都有说明

注意事项

在使用该组件时注意methods内handleChange (value)中传的值value是与你使用的联动方式有关，如果使用的是省市区三级联动传的是value[2]数组，会获取到三个6位的区域码，注意细节处理。

CodeToText的使用

handleChange1(value) {
        if (value[1] != null && value[2] != null) {
          var dz = CodeToText[value[0]] + '/' + CodeToText[value[1]] + '/' + CodeToText[value[2]]
          this.addressid = value[2]
        } else {
          if (value[1] != null) {
            dz = CodeToText[value[0]] + '/' + CodeToText[value[1]]
            this.addressid = value[1]
          } else {
            dz = CodeToText[value[0]]
            this.addressid = value[0]
          }
        }
        this.address = dz

        console.log(dz)
        console.log(value)
      },