目錄

• 前言
• 解決思路
• 具體實現
  
• 需要滿足的必備條件
• 問題

前言

我們會經常使用表格，如果資料量大就直接可以分頁，但是不可避免的會出現一些需要一頁要展示很多條的情況，或者不用分頁。

這個時候如果純展示還好一點，列表裡如果加上可編輯，就會變得卡的不行，點個下拉框，下拉框好久才會彈出來。這樣是十分影響使用者使用。

解決思路

• 首先我考慮是不是由於資料載入太慢導致的頁面卡頓，於是我採用了滾動載入的方式，首先獲取資料後，先載入100條資料。滾動的時候再載入到頁面中，這樣分批次載入，就會減輕首次載入資料量太大的壓力。剛開始是沒有問題的，等到後面資料越來越多的時候，再點選表格中可編輯的下拉框時候就明顯感覺到頁面變卡了。
• 後面想的就是如果我只載入頁面看得到的區域的資料，那麼應該就能解決頁面卡頓的問題了。

具體實現

剛開始載入時候獲取10/20條資料（這個可以通過計算，每一行的高度/頁面顯示資料的高度，也可以固定數值），滾動的時候監聽滾動條，根據滾動的距離來計算顯示頁面的資料。

需要滿足的必備條件

列表的總高度

總資料長度 每一行的高度

如果只有頁面顯示的高度，就無法滾動獲取新的資料

每一行的高度

如果是固定高度可以寫死數值
如果是動態高度可以通過計算

滾動的偏移量

當前滾動的距離 - ( 當前滾動的距離 % 每一行的高度)

頁面展示的資料的起始索引及結束索引

起始索引剛開始為0
滾動的過程中

起始索引 = Math.floor(當前滾動的距離 / 每一行的高度)

程式碼步驟

<div class="main-inner-content">
    <el-table :data="visibleData" :style="{'min-height': gradingEditor ? listHeight+'px':'100%'}" id="dataTable">

    </el-table>
</div>

computed: {
        // //列表總高度
        listHeight () {
            // tableData 是獲取介面的總資料
            return this.tableData.length * this.itemSize;
        },// //偏移量對應的style
        getTransform () {
            return `translate3d(0,${this.startOffset}px,0)`;
        },//獲取真實顯示列表資料
        visibleData () {
            let tableBody = document.querySelector('#dataTable >.el-table__body-wrapper')
            if (tableBody) {
                tableBody.style.transform = this.getTransform
            }
            return this.tableData.slice(this.start,Math.min(this.end,this.tableData.length));
        }
    },data() {
    return {
        tableData:[www.cppcns.com
 
],//偏移量
        startOffset: 0,//起始索引
        start: 0,//結束索引
        end: null,};
},methods:{
    handleScroll () {
        // 這個是滾動的盒子,如果滾動的位置是table,這裡也對應的改下就好了，還有偏移量賦值的地方
        let scrollTop = document.getElementById('main-inner-content').scrollTop;
        // //此時的開始索引
        this.start = Math.floor(scrollTop / this.itemSize);
        if (this.start < 0) this.start = 0;
        // //此時的結束索引
        this.end = this.start + 10;
        // //此時的偏移量
        this.startOffset = scrollTop - (scrollTop % this.itemSize);
        this.startOffset = this.startOffset > this.itemSize ? this.startOffset - this.itemSize : 0;
    }
},mounted(){
    window.addEventListener("scroll",this.handleScroll,true);
},destroyed(){
    window.removeEventListener('scroll',true) //  清除滾條滾動事件
}

頁面滾動的時候一直只會載入十條資料
通過偏移量來確定頁面展示

問題

我是給整個el-table設定了總高度，然後給下面列表項的盒子設定的偏移量。如果頁面是在不重新整理的情況下需要重新獲取資料（比如分頁），一定要將資料初始化，否則頁面會直接展示之前的資料，或者頁面出現空白。

document.querySelector('#main-inner-content').scrollTop = 0
this.start = 0
this.startOffset = 0
this.end = this.start + 10;
let tableBody = document.querySelector('#dataTable >.el-table__body-wrapper')
tableBody.style.transform = this.getTransform

為了方便計算及使用，頁面每一行的高度我採用的是固定高度的方式使用的是超出省略的方式，但是部署預發環境後會發現-webkit-box-orient: vertical這句程式碼直接就沒有了，不顯示。
解決辦法：寫行內樣式style="-webkit-box-orient: vertical" 這樣DbNhOBJzY就可以了

.omit-text {
    word-wrap: break-word; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: -webkit-box; 
    -webkit-box-orient: vertical;  
    -webkit-line-clamp: 2; 
}

參考
https://juejin.cn/post/6844903982742110216#heading-4
https://codesandbox.io/s/virtuallist-1-forked-sd2xn?file=/src/components/VirtualList.:1487-1652

到此這篇關於淺談el-table中使用虛擬列表對對錶格進行優化的文章就介紹到這了,更多相關el-table表格優化內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！