El-table组件实现懒加载

背景

有的时候我们表格的数据不想使用分页组件展示，想要显示所有的数据，但是显示所有数据会导致服务器负荷严重(比如CPU过载)，我们可以使用懒加载的形式，此方式利用监听是否滚动到元素底部，如果到元素底部就去请求下一页的数据

原理

效果图

示例代码

<template>
  <div class="app">
    <!-- 
      思路：
        表格设置固定高度
        默认加载10条数据
        对表格容器进行滚动事件的监听，监听是否到达底部，如果到达底部则往表格追加数据
    -->
    <h1>表格-懒加载</h1>
    <el-table
      :data="table_data"
      border
      style="width: 100%"
      height="400"
      ref="tableRef"
    >
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      table_data: [],
      // 获取第几条数据开始，然后取多少条
      query_info: {
        start: 0,
        limit: 10,
      },
      table_total: 0,
    }
  },
  created() {
    this.fetchPersonData()
  },
  mounted() {
    this.setTableLazyLoading()
  },
  methods: {
    fetchPersonData() {
      const params = {
        ...this.query_info,
      }
      // 模拟服务器返回的数据
      getPeronList(params).then(() => {
        const data = []
        // 这里是模拟的可以不用管，到时服务端是会返回正确的数据
        for (
          let i = this.query_info.start;
          i < this.query_info.start + this.query_info.limit;
          i++
        ) {
          data.push({
            date: '2024-05-09',
            name: `测试${i}`,
            address: 'gz',
          })
        }
        // 假设返回的总数
        this.table_total = 54
        this.table_data.push(...data)
      })

      function getPeronList() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve()
          }, 300)
        })
      }
    },
    setTableLazyLoading() {
      const table_el = this.$refs.tableRef.$el
      const dom = table_el.querySelector('.el-table__body-wrapper')
      dom.addEventListener('scroll', () => {
        const bottom_distance =
          dom.scrollHeight - dom.scrollTop - dom.offsetHeight
        // console.log('距离底部的距离:', bottom_distance)
        if (bottom_distance == 0 && this.query_info.start <= this.table_total) {
          this.query_info.start = this.query_info.start + this.query_info.limit
          this.fetchPersonData()
        }
      })
    },
  },
}
</script>

<style lang="less" scoped></style>

参考文档

• https://blog.csdn.net/Seven71111/article/details/120739925