数据不全，是2016前的数据，area-data 不建议使用 【三级联动】基于vue使用element定义一个三级联动省市级选择器

一，省市级选择器代码

1.引入中国省市区数据(含港澳台)

 npm install area-data --save

2.代码展示

<template>
  <el-form :model="form>
    <el-form-item label="三级联动选择器省市区:"">
        <el-select v-model="form.province" clearable placeholder="省" @change="seletekey($event, 'province')">
          <el-option v-for="(val, key) in provinces" :key="key" :label="val" :value="val" />
        </el-select>
        <el-select v-model="form.city" clearable placeholder="市" @change="seletekey($event, 'city')">
          <el-option v-for="(val, key) in citys" :key="key" :label="val" :value="val" />
        </el-select>
        <el-select v-model="form.area" clearable placeholder="区" @change="seletekey($event, 'area')">
          <el-option v-for="(val,key) in areas" :key="key" :label="val" :value="val" />
        </el-select>
    </el-form-item>
  </el-form>
</template>
 
<script>
//数据获取


import { pcaa } from 'area-data'
export default {
  data() {
    return {
      form: {},
      pcaaData: pcaa,
      // 区域数据
      provinces: pcaa['86'],
      citys: [],
      areas: []
    }
  },
  methods: {
    seletekey(e, type) {
      if (e) {
        switch (type) {
          case 'province':
	          this.form.city = ''
	          this.form.area = ''
            Object.keys(this.provinces).filter(item => {
              if (this.provinces[item] === e) {
                this.citys = this.pcaaData[item]
              }
            })
            break
          case 'city':
          	this.form.area = ''
            Object.keys(this.citys).filter(item => {
              if (this.citys[item] === e) {
                this.areas = this.pcaaData[item]
              }
            })
            break
          case 'area':
            break
        }
      }
    }
  }
}
</script>

二、另外介绍vue-area-linkage组件
1.安装

// v5之前的版本
npm i --save vue-area-linkage

// v5及之后的版本
npm i --save vue-area-linkage area-data

2.使用
第一步:main.js中引用

import Vue from 'vue';
import { pca, pcaa } from 'area-data'; // v5 or higher
import 'vue-area-linkage/dist/index.css'; // v2 or higher
import VueAreaLinkage from 'vue-area-linkage';
 
Vue.use(VueAreaLinkage)

第二步：调用组件

<area-select v-model="selected" :data="pcaa"></area-select>

组件详细使用说明vue-area-linkage
https://github.com/dwqs/vue-area-linkage