el-tabs嵌套el-table 时,切换闪屏

1,525 阅读1分钟

嵌套并且不循环表格时,需要在el-table中添加 v-if="activeName === 'first' ",first 为 el-tab-panename 属性

<el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane label="门店数据" name="first">
    <el-table ref="multipleTable" :stripe="true" :data="tableData" tooltip-effect="dark" border v-if="activeName==='first'"
       style="width: 100%" v-loading="loading" element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <el-table-column prop="shop_name" label="门店" align="center">
    </el-table>
  </el-tab-pane>
  <el-tab-pane label="品牌数据" name="second">
    <el-table ref="multipleTable" :stripe="true" :data="tableData" tooltip-effect="dark" border
      v-if="activeName==='second'" style="width: 100%" v-loading="loading" element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <el-table-column prop="领取" label="领取" align="center">
      </el-table-column>
    </el-table>
  </el-tab-pane>
</el-tabs>

嵌套并且循环表格时,需要在el-table中添加 v-if="activeName === item.key",item.key 是 el-tab-pane 循环的 name 属性

<!-- tabs切换页 -->
<el-tabs class="tabsTable" v-model="activeName" @tab-click="handleClick">
  <el-tab-pane
    v-for="(item, index) in phoneData"
    :key="index"
    :name="item.key"
    :label="item.label"
  >
    <!-- 表格 -->
    <el-table
      v-if="activeName === item.key"
      border
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column label="序号" type="index" width="130">
      </el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="getNowFormatDate">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总计">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
    </el-table>
  </el-tab-pane>
</el-tabs>