vue element 双重el-tabs 加 时间线

记录：

HTML

<template>
  <div class="stage">
    // 双重tabs循环
    <el-tabs style="margin-top: 12px" @tab-click="handleClick" :value="getActiveName(tabArr)" ref="aa">
      <el-tab-pane v-for="item in tabArr" :key="item.key" :label="item.name" :name="item.name">
        <div class="line"></div>
        <el-tabs class="childTab" v-model="activeName">
          <el-tab-pane v-for="i in item.children" :key="i.key" :label="i.name" :name="i.name">
            <div>
              <el-timeline>
                <el-timeline-item placement="top" v-for="e in i.children" :class="`iconStatus_${e.status}`" :key="e.id" :icon="iconStatus(e.status)">
                  <el-card>
                    <div class="contentWho">
                      <span>{{ e.identity }}：{{ e.name }}</span>
                    </div>
                    <div class="contentTime">
                      <span style="margin-right: 6px">{{ e.date }}</span
                      ><span>{{ e.time }}</span>
                    </div>
                    <div class="contentOption">
                      <span>意见：{{ e.option }}</span>
                    </div>
                    
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

JS

// 根据状态显示不同icon
computed: {
    iconStatus() {
      return (status) => {
        switch (status) {
          case '1':
            return 'iconfont iconxiangmutongji'
          case '2':
            return 'el-icon-search'
          case '3':
            return 'iconfont iconxiangmutongji'
          case '4':
            return 'iconfont iconxiangmutongji'
          default:
            return 'iconfont iconxiangmutongji'
        }
      }
    }
  },
  data() {
    return {
      // 假数据是一个三级树结构
      tabArr: [
        {
          name: 'xx',
          date: '2022-05-20',
          time: '05:20',
          option: 'sdsad',
          status: '1',
          identity: 'xx',
          id: '456464646'
        }
      ],
      activeName: ''
    }
  },
  mounted() {
    const tab = {
      index: 0
    }
    this.handleClick(tab)
  },
  methods: {
    getActiveName(tabArr) {
      // 默认选择第一项
      return tabArr[0].name
    },
    handleClick(tab) {
      const num = Number(tab.index)
      this.activeName = this.tabArr[num].children[0].name
    }
  }

CSS

.stage {
  width: 100%;
  height: 100%;
  color: #e2fefe;
  .line {
    width: 100%;
    height: 1px;
    background: linear-gradient(270deg, rgba(243, 255, 255, 0) 0%, rgba(226, 254, 254, 0.5) 100%);
  }
}
.childTab {
  /deep/.el-tabs__item {
    margin-right: 14px;
    color: #e2fefe;
    width: 118px !important;
    height: 36px;
    text-align: center;
    padding: 0;
    background: url('路径') no-repeat left bottom !important;
  }
  /deep/.is-active {
    color: #38fdf6;
    background: url('路径') no-repeat left bottom !important;
  }
}
/deep/.el-tabs {
  .el-tabs__active-bar {
    color: #e2fefe;
    height: 0;
  }
// 同时满足两个类名才有效果
  .is-top:nth-child(2).is-active{
      background-image: url('路径');
  }
  .is-top:last-child.is-active{
      background-image: url('路径');
  }
  .el-tabs__item {
    color: #e2fefe;
    width: 94px;
    height: 36px;
    text-align: center;
    padding: 0;
    background-image: url('路径');
  }
  .el-tabs__nav-wrap::after {
    height: 0;
  }
  .el-tabs__nav-wrap.is-scrollable {
    padding: 0;
  }
  .is-active {
    color: #38fdf6;
    background-image: url('路径');
  }
}
// 去掉及修改原本的样式等
/deep/.el-timeline {
  .el-timeline-item__timestamp {
    margin: 0;
  }
  .el-timeline-item__node--normal {
    width: 32px;
    height: 32px;
    background: rgba(226, 254, 254, 0.1);
  }
  .el-timeline-item__content {
    margin-left: 10px;
  }
  .el-timeline-item__node--normal {
    left: 0;
  }
  .el-timeline-item__tail {
    top: 32px;
    height: calc(100% - 32px);
    left: 16px;
    border-left: 1px dashed rgba(226, 254, 254, 0.4);
  }
  .el-card {
    background: linear-gradient(270deg, rgba(14, 26, 42, 0.1) 0%, rgba(9, 34, 40, 0.4) 46%, rgba(9, 34, 40, 0.6) 100%);
    border-radius: 4px;
    border: 1px solid;
    border-image: linear-gradient(270deg, rgba(255, 255, 255, 0.1), rgba(226, 254, 255, 0.3)) 1 1;
  }
  .el-card__body {
    padding: 8px 16px;
    color: #e2fefe;
    .contentWho,
    .contentTime {
      margin-bottom: 8px;
    }
    .contentStatus {
      position: absolute;
      top: 16px;
      right: 16px;
    }
  }
}
.iconStatus_1,
.iconStatus_4 {
  /deep/.el-timeline-item__icon {
    color: #e2fefe;
  }
}
.iconStatus_2,
.iconStatus_5 {
  /deep/.el-timeline-item__icon {
    color: #6aff98;
  }
}
.iconStatus_3 {
  /deep/.el-timeline-item__icon {
    color: #ff7272;
  }
}