使用了ant design vue 中的 a-table 组件,不使用分页,当表格数据过多时导致页面卡顿,此时可以使用虚拟滚动,减少dom节点,提高性能
实现方式和elemnetUI的el-table方法类似,主要是减少dom节点,每次只显示可视区的内容,滚动的时候,通过改变dom节点的内容达到页面数据的更新的效果。
效果如下:
1 页面结构
<template>
<div>
<div>
<a-table
ref="tableRef"
style="width:260px"
border
:scroll="{x:true,y:418}"
:data-source="sliceTable"
:columns='columns'
:rowKey="row => row.id"
>
</a-table>
</div>
</div>
</template>
2.定义变量
data(){
return{
// 表格所有数据
tableData: [],
// 开始索引
startIndex: 0,
// 选中的数据
selectedRows: [],
// 空元素,用于撑开table的高度
vEle: undefined,
// 是否全选
isSelectedAll: false,
columns:[
{
title: '姓名',
dataIndex: 'name',
key: 'name',
width: 30,
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
width: 30,
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
width: 30,
},
]
}
},
3.定义方法
// 计算属性
computed: {
// 这个是截取表格中的部分数据,放到了 table 组件中来显示
sliceTable() {
return this.tableData.slice(this.startIndex, this.startIndex + 9);
},
},
created() {
// 创建一个空元素,这个空元素用来撑开 table 的高度,模拟所有数据的高度
this.vEle = document.createElement("div");
this.loadData();
},
mounted() {
// 绑定滚动事件
this.$refs.tableRef.$el
.querySelector(".ant-table-body")
.addEventListener("scroll", this.tableScroll, {
passive: true
});
},
methods: {
// 加载数据
loadData() {
let start_i = this.tableData.length;
for (let i = start_i; i < start_i + 20; i++) {
this.tableData.push({
id: i,
name: "zhangsan" + i,
age: 12,
address: "china"
});
}
this.$nextTick(() => {
// 设置成绝对定位,这个元素需要我们去控制滚动
this.$refs.tableRef.$el.querySelector(".ant-table-tbody").style.position = "absolute";
// 计算表格所有数据所占内容的高度
this.vEle.style.height = this.tableData.length * 48 + "px";
// 把这个节点加到表格中去,用它来撑开表格的高度
this.$refs.tableRef.$el.querySelector(".ant-table-body").appendChild(this.vEle);
});
},
/**
* @description: table 滚动事件
* @param {*}
* @return {*}
*/
tableScroll() {
let bodyWrapperEle = this.$refs.tableRef.$el.querySelector(".ant-table-body");
// 滚动的高度
let scrollTop = bodyWrapperEle.scrollTop;
// 下一次开始的索引
this.startIndex = Math.floor(scrollTop / 48);
// 滚动操作
bodyWrapperEle.querySelector(".ant-table-tbody").style.transform = `translateY(${this.startIndex * 48}px)`;
// 滚动到底,加载新数据
if (bodyWrapperEle.scrollHeight <= scrollTop + bodyWrapperEle.clientHeight) {
if (this.tableData.length == 100) {
this.$message.warning("没有更多了");
return;
}
this.loadData();
}
}
}