快捷導(dǎo)航

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

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

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

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

首先我想要對(duì)表格進(jìn)行滾動(dòng)加載，接口需要我傳遞的數(shù)據(jù)為行數(shù)，傳遞了行數(shù)來(lái)規(guī)定從第幾行開(kāi)始返回部分?jǐn)?shù)據(jù)，具體返回?cái)?shù)據(jù)的條數(shù)需要根據(jù)接口來(lái)定。

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

table表格：

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

賦予表格滾動(dòng)事件：

使用 ref 來(lái)獲取到table表格
當(dāng)表格存在時(shí)，再去對(duì)表格進(jìn)行操作，否則可能導(dǎo)致獲取不到而報(bào)錯(cuò)
使用 tableComponent.$el.querySelector('.ant-table-body') 來(lái)獲取表格組件內(nèi)部具有類名 ant-table-body 的容器元素。這個(gè)容器通常用于包裹表格的內(nèi)容，并且可能具有滾動(dòng)條
給表格添加一個(gè)滾動(dòng)事件監(jiān)聽(tīng)器，當(dāng)表格容器發(fā)生滾動(dòng)時(shí)，就會(huì)調(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);
    }
  })
},

在給表格添加滾動(dòng)事件監(jiān)聽(tīng)的時(shí)候，同時(shí)要在頁(yè)面的銷毀鉤子函數(shù)中移除對(duì) table 添加的事件監(jiān)聽(tīng)，以免會(huì)出現(xiàn)不必要的錯(cuò)誤，保證代碼的穩(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);
     }
   })
 },

滾動(dòng)事件：

到現(xiàn)在為止，當(dāng) table 表格滾動(dòng)的時(shí)候，就會(huì)觸發(fā) handleScroll 方法，下面是 handleScroll 方法：

handleScroll() { //滾動(dòng)的事件
     const tableComponent = this.$refs.myTable;
     const tableContainer = tableComponent.$el.querySelector('.ant-table-body');
     const scrollPosition = tableContainer.scrollTop;
     const isAtTop = scrollPosition === 0;
     if (isAtTop) {
        // 已滾動(dòng)到頂部，執(zhí)行相應(yīng)操作
       this.render(-100)
     }
     const isAtBottom = tableContainer.scrollHeight - scrollPosition === tableContainer.clientHeight;
     if (isAtBottom) {
       // 已滾動(dòng)到底部，執(zhí)行相應(yīng)操作
       this.render(100)
     }
 },

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

總之，這段代碼的作用是在滾動(dòng)事件發(fā)生時(shí)，檢查是否滾動(dòng)到了頂部或底部，并且相應(yīng)的請(qǐng)求服務(wù)來(lái)拿到我們想要的數(shù)據(jù)。這樣就成功啦！

到此這篇關(guān)于ant design vue中table表格滾動(dòng)加載實(shí)現(xiàn)思路的文章就介紹到這了,更多相關(guān)ant design vue滾動(dòng)加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: