只写Vue一版,适用于React等
产品经理不允许表格分页,但是数据太多导致阻塞,如何处理?
问题描述
在处理前端阻塞问题时,我们首先需要明确阻塞的类型,包括计算和渲染两种。
当将图标切换成表格时,产品经理要求不采用分页,但当前数据表格总共有 800 条数据,导致页面可能在加载时卡顿约 3 秒,给用户一种死机的感觉。随着数据量的增加,卡顿感会逐渐加强。
优化方案一:
我们并不必立即渲染全部数据,而是可以先展示前 10 - 20 条数据。最终目标是实现滑动条下滑到一定位置时,瞬间添加下面的数据。
最终效果
实现原理:
在组件中设置需要的数据:
js
tepTableDate: [], // 中间数据
params: {
pageSize: 10, // 一次多少个
pageNum: 0 // 第多少页
},
valueTable: [] // 数据的展示值
表格子组件接收到 tableData
数据后,存储数据并给出展示数据:
js
this.tepTableDate = [...this.tableData];
// 给出展示数据
this.valueTable = this.handlePageAPI();
处理数据的函数,使用 slice
切割新数据,不影响 tepTableDate
:
js
handlePageAPI() {
const { pageSize, pageNum } = this.params;
const newValueTable = this.tepTableDate.slice(pageNum * pageSize, (pageNum + 1) * pageSize);
return newValueTable;
},
接下来,获取滚动容器并监听滚动事件:
我使用的el-table组件,按照自己的来。
js
const eltableNode = document.querySelector(".deal-table .el-table .el-table__body-wrapper");
eltableNode.addEventListener("scroll", (e) => {
// 获取滚动容器
const scrollContainer = e.target;
if (scrollContainer.scrollTop + scrollContainer.clientHeight >= scrollContainer.scrollHeight - 10) {
this.params.pageNum++;
this.valueTable.push(...this.handlePageAPI());
}
});
以上方案解决了快速展示,加载数据问题。
如果带有搜索按钮,在tepTableDate
上进行一次过滤就行,过滤出新的数据。
伪代码:
ini
<el-table :data="valueTable">
......
</el-table>
kotlin
export default {
props: {
tableData: {
type: Array,
default() {
return [];
}
},
},
data() {
return {
tepTableDate: [],
params: {
pageSize: 10,
pageNum: 0
},
valueTable: []
};
},
mounted() {
this.handleScroll();
},
methods: {
handleScroll() {
this.tepTableDate = [...this.tableData];
this.valueTable = this.handlePageAPI();
const eltableNode = document.querySelector(".deal-table .el-table .el-table__body-wrapper");
eltableNode.addEventListener("scroll", (e) => {
// 获取滚动容器
const scrollContainer = e.target;
if (scrollContainer.scrollTop + scrollContainer.clientHeight >= scrollContainer.scrollHeight - 10) {
this.params.pageNum++;
this.valueTable.push(...this.handlePageAPI());
}
});
},
handlePageAPI() {
const { pageSize, pageNum } = this.params;
const newValueTable = this.tepTableDate.slice(pageNum * pageSize, (pageNum + 1) * pageSize);
return newValueTable;
},
}
};
其他优化方案:
增加 Loading 状态:
在加载数据的时候,可以考虑给用户一个 Loading 的提示,让用户知道数据正在加载中,避免用户误以为页面出现了问题。
优化搜索功能:
当有搜索按钮的时候,可以考虑在搜索的时候异步加载数据,确保搜索结果的及时性。
优化滚动事件:
可以在滚动事件中加入一些节流和防抖的机制,以减少不必要的事件触发,提高性能。
考虑分页的默认状态:
如果用户一开始加载的数据较多,可以考虑在页面初始化时就展示部分数据,而不是等用户滚动到底部才加载。 可以先加载一点,之后在非用户操作下去加载以后的全部数据。