Linux 指令lsblk 作用，以及查看cpu使用情况和磁盘IO iostat指令详解

原本是可以用el-tabs做的,就像下面的样式,但是领导说不行

最后用button和element里面的el-carousel(走马灯)结合了一下

长这样  感觉还不错 可以自己改样式

代码如下:

        <div class="drawer-carousel">
          <el-carousel arrow="always" :loop="false" :initial-index="0" indicator-position="none" :autoplay="false"
            height="60px" :items-per-page="6">
            <el-carousel-item v-for="(group, index) in Math.ceil(tabs.length / 6)" :key="index">
              <div class="button-group">
                <el-button v-for="(tab, tabIndex) in tabs.slice(index * 6, (index + 1) * 6)" :key="tabIndex"
                  @click="handleClickReport(tab.reportCoreId)" size="medium">
                  <el-tooltip :content="tab.reportCoreName" :disabled="isShowTooltip" :open-delay="100" placement="top"
                    effect="light">
                    <span class="span-ellipsis" @mouseover="mouseOver($event)">{{ tab.reportCoreName }}</span>
                  </el-tooltip>

                </el-button>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>

解释一下

一些css样式

  .drawer-carousel {
    padding: 10px 10px 0 0;
    position: relative;

    .button-group {
      margin: 0 20px 0 40px;
      white-space: nowrap;

      span {
        display: inline-block;
        width: 90px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  } 
//按钮样式
 .el-carousel__arrow--left,
  .el-carousel__arrow--right {
    font-size: 30px;
    color: #1C1C1C;
  }

  .el-carousel__arrow--left {
    left: 0px;
  }

  .el-carousel__arrow--right {
    right: 0;
  }