Vue2 ant-design table由于表格渲染太多数据导致渲染慢问题
由于表格渲染数据太多,导致渲染慢,所以初始展示一些数据,滚动再加载剩余数据,加快首次渲染页面速度
废话不多说,直接上代码:
<template>
<div class="page-main">
<a-table
ref="tableRef"
:bordered="true"
:columns="tableColumnList"
:data-source="tableCopyData"
:loading="tableLoading"
:pagination="false"
:scroll="scrollNum"
:rowKey="(record, index) => index"
>
<a slot="action" slot-scope="text">action</a>
</a-table>
</div>
</template>
<script>
export default {
name: 'tableScroll',
data() {
return {
scrollNum: { x: 2600, y: 'calc(100vh - 560px)' },
tableLoading: false,
hasMore: false,
tableData: [], // 展示表格数据
tableCopyData: [], // 全部表格数据
tableColumnList: [
{ title: 'Full Name', width: 100, dataIndex: 'name', key:'name', fixed: 'left' },
{ title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
{ title: 'Column 1', dataIndex: 'address', key: '1', width: 150 },
{ title: 'Column 2', dataIndex: 'address', key: '2', width: 150 },
{ title: 'Column 3', dataIndex: 'address', key: '3', width: 150 },
{ title: 'Column 4', dataIndex: 'address', key: '4', width: 150 },
{ title: 'Column 5', dataIndex: 'address', key: '5', width: 150 },
{ title: 'Column 6', dataIndex: 'address', key: '6', width: 150 },
{ title: 'Column 7', dataIndex: 'address', key: '7', width: 150 },
{ title: 'Column 8', dataIndex: 'address', key: '8' },
{
title: 'Action',
key: 'operation',
fixed: 'right',
width: 100,
scopedSlots: { customRender: 'action' },
},
],
}
},
created() {
this.billMonth = [moment().subtract(1, 'months').format('YYYY-MM'), moment().subtract(1, 'months').format('YYYY-MM')]
this.prodIncomeCostQueryItem()
this.fetchTable()
},
mounted() {
this.handleScrollTable()
},
destroyed() {
// 组件销毁前移除事件监听器
const table = this.$refs.tableRef
if (table) {
const scrollContainer = table.$el.getElementsByClassName('ant-table-body')[0]
if (scrollContainer) {
scrollContainer.removeEventListener('scroll', this.handleScroll)
}
}
},
methods: {
handleScrollTable() {
// 确保表格已挂载
this.$nextTick(() => {
// 通过设置ref 属性,获取表格dom 元素
const table = this.$refs.tableRef
if (table) {
// 获取表格的滚动容器并添加滚动事件监听器
const scrollContainer = table.$el.getElementsByClassName('ant-table-body')[0]
if (scrollContainer) {
const throttledHandleScroll = _.throttle(this.handleScroll, 200)
scrollContainer.addEventListener('scroll', throttledHandleScroll)
}
}
});
},
handleScroll(event) {
const target = event.target;
const { scrollHeight, scrollTop, clientHeight } = target;
this.hasMore = this.tableCopyData.length === this.tableData.length ? true : false
// 距离表格内容底部距离 小于 '30' 时 渲染剩余数据
if(scrollHeight - (scrollTop + clientHeight) < 30 && !this.hasMore) {
this.tableCopyData = lodash.slice(this.tableData, 0, this.tableCopyData.length+2)
}
},
}
}
</script>
旨在分享~~~~~~~~~~~~~~~~~~~~~~~