Element UI 中国省市区级联数据-青梅博客

使用方法

1.安装

npm安装

npm install element-china-area-data -S

或者yarn安装

yarn add element-china-area-data

2.使用页面引入

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

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

3.具体事例

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

<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>