vue数据太多导致页面卡顿解决办法

这篇具有很好参考价值的文章主要介绍了vue数据太多导致页面卡顿解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：查询统计表格页面操作卡顿迟缓

原因：查询一天内某个接口每分钟调用量，由于一次返回几百列数据（60*24），并且不做分页，加载过多数据之后，造成页面卡顿，操作延迟

解决办法：

1.和后端沟通进行页面分页加载（本次需求列数过多，不适用）

2.使用umy-ui库中的表格代替el-table

u-table不支持展开行，需要展开行使用ux-grid
ux-grid解决列多行多导致卡的情况
u-table解决行多的情况，不解决列多的情况

下面是ux-grid懒加载展开行的例子：

// main.js
import 'umy-ui/lib/theme-chalk/index.css'// 引入样式
import { UTableColumn, UTable, UxGrid, UxTableColumn } from 'umy-ui' // 按需引入组件
Vue.component(UTable.name, UTable)
Vue.component(UTableColumn.name, UTableColumn)
Vue.component(UxGrid.name, UxGrid)
Vue.component(UxTableColumn.name, UxTableColumn)

加上row-id属性，以及展开行tree-config、expand-config ,ux-table-column添加tree-node属性

<template>
  <!-- 表格 -->
  <div class="table-container">
    <ux-grid
      ref="plxTable"
      border
      :data="tableData"
      row-id="key"
      :tree-config="{lazy: true, children: 'children', hasChild: 'hasChildren', loadMethod: load}"
      :expand-config="{ labelField: 'key', expandAll: false}"
    >
      <ux-table-column
        v-for="(item, index) in tableConfig"
        :key="index"
        align="center"
        :field="item.prop"
        :title="item.label"
        :width="tableData.length ? item.width : 'auto'"
        :fixed="item.fixed"
        :tree-node="item.prop == 'key'"
      >
        <template slot-scope="{ row }">
          <span>{{ row[item.prop] }}</span>
        </template>
      </ux-table-column>
    </ux-grid>
  </div>
</template>

load 方法里面是后端请求回来的数据，需要return出去

methods: {
    async load({ row }) {
      let nodes = []
      this.$store.commit('settings/CHANGE_LOADING', true)
      try {
        const res = await queryUsersStatistics({
          date: this.date,
          appKey: row.key
        })
        const { success, data } = res
        if (success && data) {
          console.log(data)
          nodes = data.map((item) => {
            const { key, total, minuteCountTable } = item
            return {
              key,
              total,
              ...minuteCountTable
            }
          })
        }
        this.$store.commit('settings/CHANGE_LOADING', false)
      } catch (error) {
        console.log(error)
        this.$store.commit('settings/CHANGE_LOADING', false)
      }
      console.log('nodes', nodes)
      return nodes
    }
  }

3.不采用ui中的表格组件，自定义虚拟表格加载数据（此方法比较复杂，手动实现虚拟表格）

放在下一篇。。。文章来源地址https://www.toymoban.com/news/detail-477807.html

到了这里，关于vue数据太多导致页面卡顿解决办法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！