©2020-2024 ioDraw All rights reserved,
Privacy Policy
使用了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(); } } }