基于vue使用element定义一个三级联动省市级选择器

目录

 前言

一、效果展示

二、省市级选择器代码

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

2.获取数据

3.代码展示

三、另外介绍vue-area-linkage组件

1.安装

2.使用

第一步:main.js中引用

第二步：调用组件

总结

---

 

 前言

开发中总是有各种用户数据的表单，就涉及到了用户的地址如省、市、区等，由于我在公司项目中也是遇到了这个需求，一般人都是直接网上找组件，毕竟数据省市区数据挺多的难以维护，所以本篇是使用element 来定义一个三级联动的选择器

一、效果展示

二、省市级选择器代码

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

 npm install area-data --save

2.获取数据

// v5之前的版本
import AreaData from 'area-data';

// v5及之后的版本
import { pca, pcaa } from 'area-data';
// 可以根据需要按需引入：
import PCA from 'area-data/pca'; 
import PCAA from 'area-data/pcaa'; 

3.代码展示

<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':
            Object.keys(this.provinces).filter(item => {
              if (this.provinces[item] === e) {
                this.citys = this.pcaaData[item]
              }
            })
            break
          case 'city':
            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>

刚开始我是使用这个组件用起来非常的简单，不过里面有一个小问题就是如果在表单中已经选择好了省市区退出去再进来他在是存在数据，清除绑定的model数据都没用，所以我还是用element自己做一个符合自己需求的吧

组件详细使用说明vue-area-linkage

总结

时刻保持学习的热情，认真做好自己的事情！