用Vue+ElementUI实现省市联动例子

前言：

最近工作中需要写一个省市联动的下拉框，然后自己就简单的造了一个轮子，现在把代码给大家分享一下。

 

代码

//这篇代码是封装的子组件的代码
//可以在选择完数据以后，调用父界面的事件进行相应的处理
<template>
  <el-row>
    <el-col :span="8">
      <el-select v-model="Prov" placeholder="请选择" @change="showProv()">
        <el-option
          v-for="(item,index) in AreaData"
          :key="index"
          :label="item.label"
          :value="item.label"
        ></el-option>
      </el-select>
    </el-col>
    <el-col :span="8">
      <el-select v-model="City" placeholder="请选择" @change="showCity()">
        <el-option
          v-for="(item,index) in CityArray"
          :key="index"
          :label="item.label"
          :value="item.label"
        ></el-option>
      </el-select>
    </el-col>
    <el-col :span="8">
        <el-select v-model="Block" placeholder="请选择" @change="showBlock()">
        <el-option
          v-for="(item,index) in BlockArray"
          :key="index"
          :label="item.label"
          :value="item.label"
        ></el-option>
      </el-select>
    </el-col>
  </el-row>
</template>

<script>
import AreaData from "../pageContentConfig/City.js";
export default {
  data() {
    return {
      //所有地区的数据
      AreaData,
      //当前选中的省份
      ProvArray: [],
      //当前选中的市
      CityArray: [],
      //当前选中的区
      BlockArray: [],
      //当前选中的省份
      Prov: "",
      //当前选中的市
      City: "",
      //当前选中的区
      Block: ""
    };
  },
  methods: {
    showProv() {
      var vm = this;
      //用户点击了某一个省份后者直辖市，获取当前这个省份或者直辖市的对象
      this.CityArray = AreaData.find(function(item) {
        return item.label === vm.Prov;
      }).children || [];
     
      //从当前对象中拿到第一个市的名字，用作自动显示
      this.City = this.CityArray[0].label || "";
      //获取当前对象中的children，里边存放各个区的数据对象
      this.BlockArray = this.CityArray[0].children || [];
      console.log( this.BlockArray);
      //从当前对象中拿到第一个区的名字，用作自动显示
      this.Block = this.BlockArray[0].label || "";
       
    },
    showCity() {
        var vm = this;
      this.BlockArray = this.CityArray.find(function(item) {
        return item.label === vm.City;
      }).children;
      console.log(this.BlockArray);
      this.Block = this.BlockArray[0].label;
      
    },
    showBlock() {
        console.log("sss");   
    }
  }

};
</script>

<style lang="less" scoped>
.el-row{
  width: 100%;
}
.el-select{
  width: 100%
}
</style>

 

省市数据：

数据直接贴提示无法发布文章，要数据的老帖私信我吧。。

 

总结：

省市联动的主要思想就是当选择一个省份以后，自动的查询市的数据，并自动的填充到市的下拉框中，当选择某一个市以后，自动填写区的数据，并自动填充到下拉框中。