type="card"?

<div class="echartsTabs">
          <div class="echartsTabs-left">
            <el-tabs v-model="activeNameEchar" type="card" @tab-click="handleClick" tab-class="my-custom-tab">
              <el-tab-pane label="下單統(tǒng)計" name="first"></el-tab-pane>
              <el-tab-pane label="支付統(tǒng)計" name="second"></el-tab-pane>
              <el-tab-pane label="退款統(tǒng)計" name="third"></el-tab-pane>
              <el-tab-pane label="傭金統(tǒng)計" name="fourth"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="echartsTabs-right">
            <el-date-picker v-model="time" @change="updateChartData" end-placeholder="結束日期" range-separator="至"
              start-placeholder="開始日期" type="daterange" value-format="yyyy-MM-dd" />
          </div>
        </div>

  //echarts--選項卡和日期篩選
  .echartsTabs {
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* 鼠標選中時樣式 */
    ::v-deep .echartsTabs-left .el-tabs__item.is-active {
      background-color: gray !important;
    }

    /*未選中時字體顏色*/
    ::v-deep .echartsTabs-left .el-tabs__item {
      color: #000 !important;
      background-color: #fff !important;
    }

    .echartsTabs-left {}
  }

普通tabs?文章來源地址http://www.zghlxwxcb.cn/news/detail-856096.html

<div class="tabs">
          <el-card class="tabs-card" shadow="hover">
            <el-tabs v-model="activeName">
              <el-tab-pane label="分銷商" name="first">
                <div class="thirdTabs">
                  <!-- 第一行 -->
                  <el-row :gutter="0" class="thirdTabs-row-1">
                    <el-col :span="4" class="thirdTabs-col-1">下單統(tǒng)計</el-col>
                    <el-col :span="5" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>下單人數(shù)</span>
                        <span class="infoCloumnSize">0</span>
                        <span class="nameGray">
                          較昨日:
                          <vab-icon icon="arrow-up-line" class="iconSizeUp" />
                          10%
                        </span>
                      </div>
                    </el-col>
                    <el-col :span="5" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>下單訂單數(shù)</span>
                        <span class="infoCloumnSize">0</span>
                        <span class="nameGray">
                          較昨日:
                          <vab-icon icon="arrow-up-line" class="iconSizeUp" />
                          10%
                        </span>
                      </div>
                    </el-col>
                    <el-col :span="10" class="thirdTabs-col">
                      <div class="infoCloumn">
                        <span>下單總金額</span>
                        <span class="infoCloumnSize">0</span>
                        <span class="nameGray">
                          較昨日:
                          <vab-icon icon="arrow-up-line" class="iconSizeUp" />
                          10%
                        </span>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-tab-pane>
              <el-tab-pane label="用戶" name="second">
                我和前面一樣哦~
              </el-tab-pane>
              <el-tab-pane label="高級代理商" name="third">
                期待一下吧~~~
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>

 //tabs
  .tabs {
    //下劃線顏色
      ::v-deep .el-tabs__active-bar {
        background-color: #13ce66 !important;
      }
      ::v-deep .el-tabs__item.is-active {
        color: #000;//選中
        opacity: 1;
        // font-size: 16px;
      }

      ::v-deep .el-tabs__item:hover {
        color: #000;//懸浮
        cursor: pointer;
        opacity: 1;
      }
  }

到了這里，關于vueelementui+tabs選項卡樣式更改-內容待遞增的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！