el-cascader省市区联动

插件地址：element-china-area-data - npm (npmjs.com)

1.安装插件 

npm install element-china-area-data -S

2. 字段讲解，按个人需求导入

import {
  provinceAndCityData, //省市二级联动数据,汉字+code
  pcTextArr, // 省市联动数据，纯汉字
  regionData, // 省市区三级联动数据
  pcaTextArr, // 省市区联动数据，纯汉字
  codeToText // 是个大对象，属性是区域码，属性值是汉字 用法例如：codeToText['110000']输出北京市
} from 'element-china-area-data'

3.具体使用

<template>
  <div>
    <!--省市区三级联动数据  -->
    <el-cascader
      :options="options"
      v-model="selectedOptions"
      @change="handleChange"
    >
    </el-cascader>
    {{ selectedOptions }}
    <!-- 省市区联动数据，纯汉字 -->
    <el-cascader
      :options="optionss"
      v-model="selectedOptionss"
      @change="handleChanges"
    >
    </el-cascader>
    {{ selectedOptionss }}
  </div>
</template>

<script>
import {
  provinceAndCityData, //省市二级联动数据,汉字+code
  pcTextArr, // 省市联动数据，纯汉字
  regionData, // 省市区三级联动数据
  pcaTextArr, // 省市区联动数据，纯汉字
  codeToText // 是个大对象，属性是区域码，属性值是汉字 用法例如：codeToText['110000']输出北京市
} from 'element-china-area-data'
export default {
  data() {
    return {
      options: regionData,
      optionss: pcaTextArr,
      selectedOptions: [],
      selectedOptionss: []
    }
  },
  methods: {
    // 省市区三级联动数据
    handleChange(e) {
      console.log(e) //  ['11', '1101', '110101']
      this.selectedOptions = e
    },
    // 省市区联动数据，纯汉字
    handleChanges(e) {
      console.log(e) // ['北京市', '市辖区', '东城区']
      this.selectedOptionss = e
    }
  }
}
</script>

<style lang="less" scoped>
</style>