Element UI级联地址省市区插件

安装

npm install element-china-area-data -S

使用

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

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

【1】、provinceAndCityData：是省市二级联动数据（不带“全部”选项）

【2】、regionData：是省市区三级联动数据（不带“全部”选项）

【3】、provinceAndCityDataPlus：是省市二级联动数据（带“全部”选项）

【4】、regionDataPlus：是省市区三级联动数据（带“全部”选项）

上述的"全部"选项绑定的value是空字符串"",相当于不选择省市区

【5】、CodeToText：是个大对象，属性是区域码，属性值是汉字

例如：CodeToText['110000’]输出 北京市

【6】、TextToCode： 是个大对象，属性是汉字，属性值是区域码

例如：
TextToCode ['北京市'].code 输出 110000,

TextToCode ['北京市']['市辖区'].code 输出110100,

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

案例

【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-china-area-data'
  export default {
    data() {
      return {
        options: provinceAndCityData,
        selectedOptions: []
      }
    },
    methods: {
      handleChange(value) {
        console.log(value)
      }
    }
  }

</script>

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

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

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

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

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

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

options：代表当前省市区级联下拉框的数据类型

selectOptions： 绑定当前选中省市区的区域码 例如：当前选中的是广东省广州市， selectOptions绑定的值是[ "440000", "440100" ]

官方文档

【1】文档

【2】在线示例

【3】gitHub项目地址

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料