el-tabs切换卡顿优化？

Z时代
2024-02-21
分类：IT

element-ui
version: 2.15.6

如题，el-tabs中嵌有table和echarts，table前端没有分页，目前测试数据量1w+，后期可能会有几w+
echarts渲染还可以，主要接口也花时间，但是现在切换tab栏的时候会很卡，有图表的tab互相切换时会卡1~2s，切换到table栏的时候会卡5~10s，如何优化？

代码结构如下：

<el-tabs>
  <el-tab-pane>
      <el-table>
          <el-table-column
             label="时间"
            prop="time"
            :width="tableData.length ? 160 : ''"
        />
          <el-table-column
            v-for="(item, index) in columns"
            :label="getColumnTitle(item.title)"
            :key="index"
            min-width="100"
          >
            <el-table-column
              :prop="item.title"
              :label="getColumnSubTitle(item.title)"
            >
              <template slot-scope="{ row }">
                <span :class="columnSpanClass(row)">{{
                  row[item.title]
                }}</span>
              </template>
            </el-table-column>
          </el-table-column>
      </el-table>
  </el-tab-pane>
  <el-tab-pane
    v-for="item in panes"
    :key="item.label"
    :label="item.label"
    :name="item.name"
    :closable="true"
    class="curve-pane"
  >
    // 曲线组件
    <curve
      :myEquipment="myEquipment"
      :info="item.info"
    ></curve>
  </el-tab-pane></el-tabs>