vue[省市区三级联动通用组件]

省市区三级联动以及其类似的组件都是差不多的原理：即利用watch监听变化，然后根据变化的内容调用下一级的接口数据，直到拿到所有内容。
唯一区别可能就是不同的人维护的获取数据的接口不同。
如：有的公司通过传递省份id获取下面市的列表，通过传递市的id获取区域的列表。
而有的公司则直接将内容以树形结构的形式返回
代码示例

<template>
  <!--获取省市区域信息-->
  <div class="area-components clearfix">
    <p style="margin-bottom: 10px;" class="clearfix">
      <span class="fl">省份：</span>
      <el-select v-model="areaCheck" class="fl" placeholder="请选择省份">
        <el-option
            v-for="item in areaList"
            :key="item.code"
            :label="item.name"
            :value="item.code">
        </el-option>
      </el-select>
    </p>
    <p style="margin-bottom: 10px;" class="clearfix">
      <span class="fl">市区：</span>
      <el-select v-model="areaCheck1" class="fl" placeholder="请选择市区">
        <el-option
            v-for="item in areaList1"
            :key="item.code"
            :label="item.name"
            :value="item.code">
        </el-option>
      </el-select>
    </p>
    <p class="clearfix">
      <span class="fl">地区：</span>
      <el-select v-model="areaCheck2" class="fl" placeholder="请选择地区">
        <el-option
            v-for="item in areaList2"
            :key="item.code"
            :label="item.name"
            :value="item.code">
        </el-option>
      </el-select>
    </p>
  </div>
</template>

<script>
  import {
    
    areaList} from 'src/api/backgroundApi';
  export default {
    
    
    data(){
    
    
      return{
    
    
        areaCheck: '', // 存放省的唯一标识
        areaList: [], // 省的列表
        areaCheck1: '', //存放市的唯一标识
        areaList1: [], // 市的列表
        areaCheck2: '',//存放区的唯一标识
        areaList2: [] // 区的列表
      };
    },
    watch:{
    
    
      // 监听省份的选择，如果选择了内容则调用接口
      areaCheck(){
    
    
      	// 传递省份的id则获取省份下面市的列表
        areaList({
    
    id:this.areaCheck}).then(res=>{
    
    
          if(res){
    
    
            // 获取市级列表
            this.areaList1 = res.data;
            // 为了让省份选择的时候市和区能够自动变为空
            this.areaCheck1 = '';
        	this.areaCheck2 = '';
          }
        });
      },
      // 监听市的选择，如果选择了内容则调用接口
      areaCheck1(){
    
    
        // 传递市的id则获取市下面区域的内容
        areaList({
    
    id:this.areaCheck1}).then(res=>{
    
    
          if(res){
    
    
            // 获取区域列表
            this.areaList2 = res.data;
            // 为了让市选择的时候区域能够自动变为空
        	this.areaCheck2 = '';
          }
        });
      }
    },
    methods:{
    
    
      // 获取省份列表
      getAreaList(){
    
    
        // id为''的时候默认获取所有省份的列表
        areaList({
    
    id:''}).then(res=>{
    
    
          if(res){
    
    
            // 获取省份列表
            this.areaList = res.data;
          }
        });
      }
    },
    mounted(){
    
    
    	// 通过接口优先获取省份的信息，即第一级的数据
    	this.getAreaList();
    }
  };
</script>