ant design vue中table表格滾動加載實現(xiàn)思路

更新時間：2024年07月05日 11:35:39 作者：ZJ_.

在處理一寫數(shù)據(jù)量特別大的情況下,我們不能把后端的數(shù)據(jù)一次性全部拿到前端在table表格中展示,為了考慮性能優(yōu)化,使用了滾動加載表格數(shù)據(jù),這篇文章主要介紹了ant design vue中table表格滾動加載實現(xiàn)思路,需要的朋友可以參考下

在處理一寫數(shù)據(jù)量特別大的情況下，我們不能把后端的數(shù)據(jù)一次性全部拿到前端在table表格中展示，為了考慮性能優(yōu)化，使用了滾動加載表格數(shù)據(jù)。做這個功能之前，我們首先需要獲取到table滾動到底部或者頂部時去觸發(fā)方法。

首先我想要對表格進行滾動加載，接口需要我傳遞的數(shù)據(jù)為行數(shù)，傳遞了行數(shù)來規(guī)定從第幾行開始返回部分數(shù)據(jù)，具體返回數(shù)據(jù)的條數(shù)需要根據(jù)接口來定。

在此功能中，我每次需要獲取100條數(shù)據(jù)，我想要每次table表格滾動到底部的時候，獲取接下來的100條，或者滾動到頂部時獲取上面的100條數(shù)據(jù)，但是大家也可以根據(jù)自己的需求來去傳遞想要的條數(shù)。

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') 來獲取表格組件內(nèi)部具有類名 ant-table-body 的容器元素。這個容器通常用于包裹表格的內(nèi)容，并且可能具有滾動條
給表格添加一個滾動事件監(jiān)聽器，當表格容器發(fā)生滾動時，就會調(diào)用 handleScroll 方法

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

在給表格添加滾動事件監(jiān)聽的時候，同時要在頁面的銷毀鉤子函數(shù)中移除對 table 添加的事件監(jiān)聽，以免會出現(xiàn)不必要的錯誤，保證代碼的穩(wěn)定性。

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

滾動事件：

到現(xiàn)在為止，當 table 表格滾動的時候，就會觸發(fā) 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) {
        // 已滾動到頂部，執(zhí)行相應操作
       this.render(-100)
     }
     const isAtBottom = tableContainer.scrollHeight - scrollPosition === tableContainer.clientHeight;
     if (isAtBottom) {
       // 已滾動到底部，執(zhí)行相應操作
       this.render(100)
     }
 },

使用this.$refs.myTable獲取表格組件的引用，并使用tableComponent.$el.querySelector('.ant-table-body')獲取表格容器元素的引用。這些步驟與前面的代碼段相同。
接下來，它獲取表格容器元素的滾動位置，使用tableContainer.scrollTop來獲取當前滾動的垂直位置。
然后，它通過比較滾動位置是否為0來判斷是否滾動到了頂部，將結(jié)果保存在isAtTop變量中。
如果滾動到了頂部（即isAtTop為真），調(diào)用了render(-100)方法，并將參數(shù)-100傳遞給它，在render方法中調(diào)用了接口獲取前100條數(shù)據(jù)
接下來，通過比較表格容器元素的總高度減去滾動位置是否等于容器元素的可見高度，來判斷是否滾動到了底部。這個條件判斷保存在isAtBottom變量中。
如果滾動到了底部（即isAtBottom為真），調(diào)用了render(100)方法，并將參數(shù)100傳遞給它，調(diào)用render方法中的接口獲取后100條數(shù)據(jù)