需求：查询统计表格页面操作卡顿迟缓
原因：查询一天内某个接口每分钟调用量，由于一次返回几百列数据（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中的表格组件，自定义虚拟表格加载数据（此方法比较复杂，手动实现虚拟表格）
放在下一篇。。。