封装三级联动功能

Maggie 发表时间: 2020-11-16 11:27 阅读:38 收藏:0

三级联动的省市区展示

<template>
  <div class="multiLevelLinkage">
    <van-cell @click="showPopup">展出弹出层</van-cell>
    <!-- 弹出层 -->
    <van-popup class="popPanel" position="bottom" :closeOnClickOverlay="true" v-model="show">
      <!-- 右上角确定按钮 -->
      <div class="multiBtn">
        <span>取消</span>
        <span @click="select(0)">{{titleList[0]}}</span>
        <span @click="select(1)">{{titleList[1]}}</span>
        <span @click="select(2)">{{titleList[2]}}</span>
        <span>确定</span>
      </div>
      <!-- 联动面板 -->
      <div class="tabGroup">
        <!-- 第一联 -->
        <div class="tabItem" v-if='isFlag == "0"'>
          <div v-for="(item, index) in DataList0" :key="index" :class="{'isActive' : item.isSelected}">
            <span @click="selectTab0(item, index)" class="">{{item.name}}</span>
          </div>
        </div>
        <!-- 第二联 -->
        <div class="tabItem" v-if='isFlag == "1"'>
          <div v-for="(item, index) in DataList1" :key="index"  :class="{'isActive' : item.isSelected}">
            <span @click="selectTab1(item, index)">{{item.name}}</span>
          </div>
        </div>
        <!-- 第三联 -->
        <div class="tabItem" v-if='isFlag == "2"'>
           <div v-for="(item, index) in DataList2" :key="index"  :class="{'isActive' : item.isSelected}">
            <span @click="selectTab2(item, index)">{{item.name}}</span>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: 'multiLevelLinkage',     // 该页面为多级联动页面
  data () {
    return {
      show: false,   // 是否显示弹层
      titleList: ['省', '市', '区'],    // tab标题
      isFlag: '0',   // 默认显示首个标题&面板
      DataList0: [
        {name: '河南省', code: '01'},
        {name: '湖南省', code: '02'},
        {name: '江苏省', code: '03'}
      ],  // 存放第一项展示值
      DataList1: [
        {name: '信阳市', code: '001'},
        {name: '南阳市', code: '002'},
        {name: '商丘市', code: '003'}
      ],  // 存放第二项展示值
      DataList2: [
        {name: '淮滨县', code: '0001'},
        {name: '西峡县', code: '0002'},
        {name: '睢阳区', code: '0003'}
      ],  // 存放第三项展示值
      currentValue: [], // 选中的结果 
      defaultValue: [
        { name: '河南省', code: '01'},
        { name: '信阳市', code: '001'},
        { name: '淮滨县', code: '0001'}
      ],
      defaultTitle: ['省', '市', '区']
    };
  },
  props: {
    receivedTitleList: Array
  },
  created () {
    // 判断是否选择第一级
    // 已选择
    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.DataList0.length; i++) {
        let item = this.DataList0[i];
        if (item.name == this.defaultValue[0].name) {
          item.isSelected = true;
        }
      }
    } else {
      // 未选择
      this.titleList[0] = this.defaultTitle[0];
    }
    // 判断是否选择第二级
    if (this.defaultValue[1]) {
      this.titleList[1] = this.defaultTitle[1];
      this.isFlag = '1';
      this.currentValue[1] = this.defaultValue[1];
      // 加上默认选中的样式
      for (var i = 0; i < this.DataList1.length; i++) {
        let item = this.DataList1[i];
        if (item.name == this.defaultValue[1].name) {
          item.isSelected = true;
        }
      }
    } 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.DataList2.length; i++) {
         let item = this.DataList2[i];
         if (item.name == this.defaultValue[2].name) {
           item.isSelected = true;
         }
       }
     } else {
       // 未选择
       this.titleList[2] = this.defaultTitle[2];
     }
  },
  methods: {
    showPopup () {
      this.show = !this.show;
    },
    // 点击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 = {
        name: item.name,
        code: item.code
      };
      this.currentValue[0] = obj;
      console.log(this.currentValue[0]);
      this.isFlag = '1';
      // 滚动选择时,去除当前tab和下一个tab的选中样式
      for (var i = 0; i < this.DataList0.length; i++) {
        this.DataList0[i].isSelected = false;
      }
      for (var i = 0; i < this.DataList1.length; i++) {
        this.DataList1[i].isSelected = false;
      }

      console.log(this.currentValue);
      // 添加选中的样式
      this.DataList0[index].isSelected = true;
    },
    selectTab1 (item, index) {
      console.log('我是第二级');   
      this.currentValue[1] = '';
      let obj = {
        name: item.name,
        code: item.code
      };
      this.currentValue[1] = obj;
      console.log(this.currentValue[1]);
       this.isFlag = '2';
      // 滚动选择时,去除当前tab和下一个tab的选中样式
      for (var i = 0; i < this.DataList1.length; i++) {
        this.DataList1[i].isSelected = false;
      }
      for (var i = 0; i < this.DataList2.length; i++) {
        this.DataList2[i].isSelected = false;
      }
      console.log(this.currentValue);
      // 添加选中的样式
      this.DataList1[index].isSelected = true;
    }
    // 选择第三级
     selectTab2 (item, index) {
       console.log('我是第三级');
       this.currentValue[2] = '';
       let obj = {
         name: item.name,
         code: item.code
       };
       this.currentValue[2] = obj;
       console.log(this.currentValue[2]);
       console.log(this.currentValue);
       for (var i = 0; i < this.DataList2.length; i++) {
         this.DataList2[i].isSelected = false;
       }
       // 添加选中的样式
       this.DataList2[index].isSelected = true;
       console.log(this.DataList2);
       this.$set(this.DataList2, index, {
         name: this.DataList2[index].name,
         code: this.DataList2[index].code,
         isSelected: true
       });
     },
PopParent(status) {
  var data = {
        flag: false,
    value: this.result
    };
    this.$emit("theEvToParent", data);
     }
  }
};
</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: aquamarine;
      overflow: hidden;
      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;
       div{
        width:100%;
        height:30px;
        line-height:30px;
        border-bottom: 1px solid rgb(195, 211, 151);
       }
       span{
        position: relative;
        align-items: center;
        // line-height:30px;
        padding-left: 10px;
       }
      .isActive{
        color:red;
        background-color: #ccc;
      }
      }
    }
  }
}
</style>
知识点:

this.$set() 用于最后一级选中后增加选中样式 链接-----https://www.cnblogs.com/Super-scarlett/p/11132034.html

收藏
评论区
发表评论