element ui tabs 标签页支持展开收起修改

<template>
  <div class="com-resource-legend" style="">
    <el-tabs type="card" v-model="activeTab" :tab-position="tabPosition" :stretch="false" @tab-click="legendClick">
      <!--     单独模块   -->
      <el-tab-pane label="legend1">
        <span slot="label">
          <img id="cityName" src="../../../../../../public/static/nxgis/img/legend/pw.png" alt=""/>
        </span>
        <!--   单独模块的内容  -->
        <div class="contain">
          <keep-alive>
            <component :is="modelLegend"></component>
          </keep-alive>
        </div>
      </el-tab-pane>
      <!-- 公共模块第一个  commonLenged1 -->
      <el-tab-pane label="legend2" name="commonLenged">
        <span slot="label">
          <img src="../../../../../../public/static/nxgis/img/legend/pw.png" alt="" v-show="pwpng"/>
          <img src="../../../../../../public/static/nxgis/img/legend/pw1.png" alt="" v-show="pw1png"/>
        </span>
        <!--        内容   -->
        <div class="publicDiv public1">
          <div class="publicDivP">

        </div>
      </el-tab-pane>

      <!-- 公共模块第二个  -->
      <el-tab-pane label="legend3">
        <span slot="label">
          <img src="../../../../../../public/static/nxgis/img/legend/mgd2.png" alt="" v-show="mgd2png"/>
          <img src="../../../../../../public/static/nxgis/img/legend/mgd1.png" alt="" v-show="mgd1png"/>
        </span>
        <!--        内容   -->
        <div class="publicDiv public1">

        </div>
      </el-tab-pane>

      <!-- 公共模块第三个  -->
      <el-tab-pane label="legend4">
        <span slot="label">
          <img src="../../../../../../public/static/nxgis/img/legend/wgh.png" alt="" v-show="wghpng"/>
          <img src="../../../../../../public/static/nxgis/img/legend/wgh1.png" alt="" v-show="wgh1png"/>
        </span>
        <!--        内容   -->
        <div class="publicDiv public1">

        </div>
      </el-tab-pane>

      <!-- 公共模块第四个  -->
      <el-tab-pane label="legend5">

        <span slot="label">
          <img src="../../../../../../public/static/nxgis/img/legend/wgh.png" alt="" v-show="wghpng"/>
          <img src="../../../../../../public/static/nxgis/img/legend/wgh1.png" alt="" v-show="wgh1png"/>
        </span>

        <div class="publicDiv public1">

        </div>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

data() {
  return {
    activeTab: 'situation1',
    tabPosition: 'right', //**
    checked: '',
    currentLab: {
      index: -1,
      isActive: false
    }
  }
},

methods: {
  //// tabs 切换点击 
  legendClick(tab, event) {
    let self = this;
    var tab_content = document.querySelectorAll(".com-resource-legend .el-tabs__content");
    if (self.currentLab.index == tab.index) {
      tab_content[0].style.display == 'none'|| ''? tab_content[0].style.display = 'block' : tab_content[0].style.display = 'none';
    }
    if (self.currentLab.index != tab.index) {
      self.currentLab.index = tab.index;
      tab_content[0].style.display = 'block';
    }
}

element ui tabs 标签页支持展开收起修改的相关教程结束。