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>
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值