el-tabs切换卡顿优化?

element-ui
version: 2.15.6

如题,el-tabs中嵌有tableechartstable前端没有分页,目前测试数据量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>
阅读 4.3k
2 个回答

1w多不分页一次性渲染肯定是多了,要么前端自己分,要么就上虚拟列表吧

新手上路,请多包涵

解决方法:虚拟列表、后端分页、node中间层分页

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题