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中的表格组件              ，自定义虚拟表格加载数据（此方法比较复杂

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，手动实现虚拟表格）

放在下一篇
  
  
  
  
  
  
  。  
  
  
  
  
  
  
。
 


 


 


 


 


 


 

。