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项目地址

 

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页