ant design vue中table表格滚动加载实现思路

在ant design vue组件库中，并没有提供可以直接监听table滚动的api，在此我使用了原生js去对table表格赋予一个监听表格滚动事件。

在处理一写数据量特别大的情况下，我们不能把后端的数据一次性全部拿到前端在table表格中展示，为了考虑性能优化，使用了滚动加载表格数据。做这个功能之前，我们首先需要获取到table滚动到底部或者顶部时去触发方法。

首先我想要对表格进行滚动加载，接口需要我传递的数据为行数，传递了行数来规定从第几行开始返回部分数据，具体返回数据的条数需要根据接口来定。

在此功能中，我每次需要获取100条数据，我想要每次table表格滚动到底部的时候，获取接下来的100条，或者滚动到顶部时获取上面的100条数据，但是大家也可以根据自己的需求来去传递想要的条数。

table表格：

<a-table 
	ref="myTable" 
	size="middle" 
    :columns="columns" 
    :data-source="dataSource" 
    :pagination="false"
    :scroll="{ y: 'calc(100vh - 160px)' }" 
    :loading="loading">
</a-table>

赋予表格滚动事件：

• 使用 ref 来获取到table表格
• 当表格存在时，再去对表格进行操作，否则可能导致获取不到而报错
• 使用 tableComponent.$el.querySelector('.ant-table-body') 来获取表格组件内部具有类名 ant-table-body 的容器元素。这个容器通常用于包裹表格的内容，并且可能具有滚动条
• 给表格添加一个滚动事件监听器，当表格容器发生滚动时，就会调用 handleScroll 方法

mounted() {
  this.$nextTick(() => {
    const tableComponent = this.$refs.myTable;
    if (tableComponent) {
      const tableContainer = tableComponent.$el.querySelector('.ant-table-body');
      tableContainer.addEventListener('scroll', this.handleScroll);
    }
  })
},

在给表格添加滚动事件监听的时候，同时要在页面的销毁钩子函数中移除对 table 添加的事件监听，以免会出现不必要的错误，保证代码的稳定性。

beforeUnmount() {
   this.$nextTick(() => {
     const tableComponent = this.$refs.myTable;
     if (tableComponent) {
       const tableContainer = tableComponent.$el.querySelector('.ant-table-body');
       tableContainer.removeEventListener('scroll', this.handleScroll);
     }
   })
 },

滚动事件：

到现在为止，当 table 表格滚动的时候，就会触发 handleScroll 方法，下面是 handleScroll 方法：

handleScroll() { //滚动的事件
     const tableComponent = this.$refs.myTable;
     const tableContainer = tableComponent.$el.querySelector('.ant-table-body');
     const scrollPosition = tableContainer.scrollTop;
     const isAtTop = scrollPosition === 0;
     if (isAtTop) {
        // 已滚动到顶部，执行相应操作
       this.render(-100)
     }
     const isAtBottom = tableContainer.scrollHeight - scrollPosition === tableContainer.clientHeight;
     if (isAtBottom) {
       // 已滚动到底部，执行相应操作
       this.render(100)
     }
 },

• 使用this.$refs.myTable获取表格组件的引用，并使用tableComponent.$el.querySelector('.ant-table-body')获取表格容器元素的引用。这些步骤与前面的代码段相同。
• 接下来，它获取表格容器元素的滚动位置，使用tableContainer.scrollTop来获取当前滚动的垂直位置。
• 然后，它通过比较滚动位置是否为0来判断是否滚动到了顶部，将结果保存在isAtTop变量中。
• 如果滚动到了顶部（即isAtTop为真），调用了render(-100)方法，并将参数-100传递给它，在render方法中调用了接口获取前100条数据
• 接下来，通过比较表格容器元素的总高度减去滚动位置是否等于容器元素的可见高度，来判断是否滚动到了底部。这个条件判断保存在isAtBottom变量中。
• 如果滚动到了底部（即isAtBottom为真），调用了render(100)方法，并将参数100传递给它，调用render方法中的接口获取后100条数据

总之，这段代码的作用是在滚动事件发生时，检查是否滚动到了顶部或底部，并且相应的请求服务来拿到我们想要的数据。这样就成功啦！

到此这篇关于ant design vue中table表格滚动加载实现思路的文章就介绍到这了,更多相关ant design vue滚动加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论