Element UI 中国省市区级联数据

在使用vue全家桶开发的时候，遇到省市县三级联动的问题
也确实有分别关于省份，市区和县的三个接口
但是这对于前端菜鸟来说，不容易将数据很好的存入
这里提供了一个方法

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

https://github.com/airyland/china-area-data数据来源