位置: IT常识 - 正文
vue数据太多导致页面卡顿解决办法(vue解决数据量过大的问题)
编辑：rootadminvue数据太多导致页面卡顿解决办法 
本文链接地址:https://www.jiuchutong.com/zhishi/283926.html
转载请保留说明！
推荐整理分享vue数据太多导致页面卡顿解决办法(vue解决数据量过大的问题)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue数据太多卡死,vuex存储大量数据会卡吗,vue解决数据量过大的问题,vue大量数据刷新怎么优化,vue处理大量数据,vue处理大量数据,vue处理大量数据,vue处理大量数据,内容如对您有帮助，希望把文章链接给更多的朋友！
需求：查询统计表格页面操作卡顿迟缓
原因：查询一天内某个接口每分钟调用量，由于一次返回几百列数据（60*24），并且不做分页，加载过多数据之后，造成页面卡顿，操作延迟
解决办法：1.和后端沟通进行页面分页加载（本次需求列数过多，不适用）
2.使用umy-ui库中的表格代替el-table
u-table不支持展开行，需要展开行使用ux-gridux-grid解决列多 行多导致卡的情况u-table解决行多的情况，不解决列多的情况下面是ux-grid懒加载展开行的例子：
// main.jsimport '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中的表格组件，自定义虚拟表格加载数据（此方法比较复杂，手动实现虚拟表格）
放在下一篇。。。
上一篇：edisk.exe是什么进程 edisk进程是什么文件(edi文件怎么打开)
