封装三级联动功能 - HelloWorld开发者社区

子组件

三级联动的省市区展示

<template>
  <div class="multiLevelLinkage">
    <!-- 弹出层 -->
    <van-popup class="popPanel" position="bottom" :closeOnClickOverlay="false" v-model="show">
      <!-- 右上角确定按钮 -->
      <div class="multiBtn">
        <span @click="PopParentCancel()">取消</span>
        <span @click="select(0)" :class="{'titleStyle':isFlag == '0'}">{{titleList[0]}}</span>
        <span @click="select(1)" :class="{'titleStyle':isFlag == '1'}">{{titleList[1]}}</span>
        <!-- <span @click="select(2)">{{titleList[2]}}</span> -->
        <span @click="PopParentConfirm()">确定</span>
      </div>
      <!-- 联动面板 -->
      <div class="tabGroup">
        <!-- 第一联 -->
        <div class="tabItem" v-if='isFlag == "0"'>
          <div v-for="(item, index) in provinceList" :key="index" :class="{'isActive' : item.isSelected}" @click="selectTab0(item, index),getCity()" >
            <span>{{item.dicName}}</span>
          </div>
        </div>
        <!-- 第二联 -->
        <div class="tabItem" v-if='isFlag == "1"'>
          <div v-for="(item, index) in cityList" :key="index"  :class="{'isActive' : item.isSelected}" @click="selectTab1(item, index)">
            <span>{{item.dicName}}</span>
          </div>
        </div>
        <!-- 第三联 -->
        <!-- <div class="tabItem" v-if='isFlag == "2"'>
           <div v-for="(item, index) in districtList" :key="index"  :class="{'isActive' : item.isSelected}" @click="selectTab2(item, index)">
            <span>{{item.dicName}}</span>
          </div>
        </div> -->
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  dicName: 'multiLevelLinkage',     // 该页面为多级联动页面
  data () {
    return {
      show: true,   // 是否显示弹层
      titleList: ['省', '市'],    // tab标题
      isFlag: '0',   // 默认显示首个标题&面板
      currentValue: [], // 选中的结果 
      defaultTitle: ['省', '市']
    };
  },
  props: {
    provinceList: Array,  // 省
    cityList: Array, // 市
    // districtList: Array, // 区
    defaultValue: Array,   // 省市默认值
    title: Array
  },
  created () {
    console.log(this.defaultValue);
    console.log(this.provinceList);
    console.log(this.cityList);
    for (var i = 0; i < this.provinceList.length; i++) {
      this.provinceList[i].isSelected = false;
    }
    for (var i = 0; i < this.cityList.length; i++) {
      this.cityList[i].isSelected = false;
    }
    // 判断是否选择第一级
    // 已选择
    if (this.defaultValue[0]) {
      this.titleList[0] = this.defaultTitle[0];
      this.isFlag = '0';
      this.currentValue[0] = this.defaultValue[0];
      // 加上默认选中的样式
      for (var i = 0; i < this.provinceList.length; i++) {
        let item = this.provinceList[i];
        if (item.dicCode == this.defaultValue[0].dicCode) {
          item.isSelected = true;
        }
      }
    } else {
      // 未选择
      this.titleList[0] = this.defaultTitle[0];
    }
    // 判断市是否存在
    if (this.defaultValue[1]) {
      this.isFlag = '1';
      this.watchCityList();
    } else {
      // 未选择
      this.titleList[1] = this.defaultTitle[1];
    }
    // }
    // 判断是否选择第三级
    // if (this.defaultValue[2]) {
    //   this.titleList[2] = this.defaultTitle[2];
    //   this.isFlag = '2';
    //   this.currentValue[2] = this.defaultValue[2];
    //   // 加上默认选中的样式
    //   for (var i = 0; i < this.districtList.length; i++) {
    //     let item = this.districtList[i];
    //     if (item.dicCode == this.defaultValue[2].dicCode) {
    //       item.isSelected = true;
    //     }
    //   }
    // } else {
    //   // 未选择
    //   this.titleList[2] = this.defaultTitle[2];
    // }
  },
  methods: {
    // 点击tabGroup选择
    select (idx) {
      if (idx != 0 && this.currentValue[idx - 1]) {
        this.isFlag = idx;
      } else if (idx == 0) {
        this.isFlag = idx;
      } 
    },
    // 选择第一级
    selectTab0 (item, index) {
      console.log('我是第一级');
      this.currentValue = [];
      let obj = {
        dicName: item.dicName,
        dicCode: item.dicCode
      };
      this.currentValue[0] = obj;
      console.log(this.currentValue[0]);
      this.isFlag = '1';
      // 滚动选择时，去除当前tab和下一个tab的选中样式
      for (var i = 0; i < this.provinceList.length; i++) {
        this.provinceList[i].isSelected = false;
      }
      for (var i = 0; i < this.cityList.length; i++) {
        this.cityList[i].isSelected = false;
      }

      console.log(this.currentValue);
      // 添加选中的样式
      this.provinceList[index].isSelected = true;
      // 通知父元素调用市的接口
      this.getCity();
    },
    selectTab1 (item, index) {
      console.log('我是第二级');   
      this.currentValue[1] = '';
      let obj = {
        dicName: item.dicName,
        dicCode: item.dicCode
      };
      this.currentValue[1] = obj;
      console.log(this.currentValue[1]);
      // this.isFlag = '2';
      // 滚动选择时，去除当前tab和下一个tab的选中样式
      for (var i = 0; i < this.cityList.length; i++) {
        this.cityList[i].isSelected = false;
      }
      // for (var i = 0; i < this.districtList.length; i++) {
      //   this.districtList[i].isSelected = false;
      // }
      console.log(this.currentValue);
      // 添加选中的样式
      this.cityList[index].isSelected = true;
      this.$set(this.cityList, index, {
        dicName: this.cityList[index].dicName,
        dicCode: this.cityList[index].dicCode,
        isSelected: true
      });
    },
    // 选择第三级
    // selectTab2 (item, index) {
    //   console.log('我是第三级');
    //   this.currentValue[2] = '';
    //   let obj = {
    //     dicName: item.dicName,
    //     dicCode: item.dicCode
    //   };
    //   this.currentValue[2] = obj;
    //   console.log(this.currentValue[2]);
    //   console.log(this.currentValue);
    //   for (var i = 0; i < this.districtList.length; i++) {
    //     this.districtList[i].isSelected = false;
    //   }
    //   // 添加选中的样式
    //   this.districtList[index].isSelected = true;
    //   console.log(this.districtList);
    //   this.$set(this.districtList, index, {
    //     dicName: this.districtList[index].dicName,
    //     dicCode: this.districtList[index].dicCode,
    //     isSelected: true
    //   });
    // }
    /** 监听是否有市  */
    watchCityList () {
      // 判断是否选择第二级
      if (this.cityList.length === 0) {
        setTimeout(() => {
          this.watchCityList();
        }, 200);
      } else {
        this.titleList[1] = this.defaultTitle[1];
        this.currentValue[1] = this.defaultValue[1];
        // 加上默认选中的样式
        for (var i = 0; i < this.cityList.length; i++) {
          let item = this.cityList[i];
          if (item.dicCode == this.defaultValue[1].dicCode) {
            item.isSelected = true;
            // 更新数据
            this.$set(this.cityList, i, {
              dicName: this.cityList[i].dicName,
              dicCode: this.cityList[i].dicCode,
              isSelected: true
            });
            return;
          }
        }
      }
    },
    PopParentCancel () {
      this.$emit('theEvToParentCancel');
    },
    PopParentConfirm () {
      var selectedVal = {
        value: this.currentValue
      };
      console.log('我是要传给父级的',  selectedVal);
      this.$emit('theEvToParentConfirm', selectedVal);
    },
    getCity () {
      this.$emit('theEvToParentGetCity', this.currentValue[0]);
    }
  }
};
</script>
<style lang="less" scoped>
.multiLevelLinkage{
  .popPanel{
    width:100%;
    height:30%;
    .multiBtn{
      display: flex;
      justify-content: space-between;
      height:30px; 
      line-height:30px;
      background-color: rgba(204,204,204,0.5);
      overflow: hidden;
      .titleStyle{
        color:#356AE6;
        border-bottom:2px solid #356AE6;
      }
      span{
        flex: 1;
        text-align: center;
        width: 25%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .tabGroup{
      display: flex;
      justify-content: space-around;
      width:100%;

      .tabItem{
       width:100%;
       text-align:center;
       height: 300px;
      overflow-y: scroll;
        padding: 0 4%;
       div{
        width:100%;
        height:30px;
        line-height:30px;
        border-bottom: 1px solid rgba(204,204,204,0.4);
       }
       span{
        position: relative;
        align-items: center;
        // line-height:30px;
        padding-left: 10px;
       }
      .isActive{
        color:#356AE6;
      }
      }
    }
  }
}
</style>