Element UI 中国省市区级联数据

Posted 2021-11-24 最小的帆也能远航

1.直接使用npm下载省市县数据

npm install element-china-area-data -S

2.在需要使用的地方引入

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

3.使用elementui级联组件
省市二级联动（不带“全部”选项）:

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