Vue2 ant-design table由于表格渲染太多数据导致渲染慢问题

hhh

已于 2024-10-09 14:10:53 修改

阅读量79

点赞数

文章标签： javascript 前端 vue.js

于 2024-10-09 14:08:56 首次发布

本文链接：https://blog.csdn.net/weixin_43978501/article/details/142785074

版权

在这里插入图片描述
由于表格渲染数据太多，导致渲染慢，所以初始展示一些数据，滚动再加载剩余数据，加快首次渲染页面速度
废话不多说，直接上代码：

<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>