Element UI 中国省市区级联数据

使用方

1.安装

npm安装

代码语言：javascript复制

npm install element-china-area-data -S

或者yarn安装

代码语言：javascript复制

yarn add element-china-area-data

2.使用页面引入

代码语言：javascript复制

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.具体事例

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

③ 省市区三级联动（不带“全部”选项）

代码语言：javascript复制

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

④ 省市区三级联动（带“全部”选项）

代码语言：javascript复制

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

4.绑定value格式

value是区域码"110000"

编程算法

0 人点赞