el-table のテーブルを最適化するために仮想リストを使用する方法についての簡単な説明

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

    </el-table>
</div>

計算: {
        // // リストの合計の高さ listHeight () {
            // tableData はインターフェースの合計データです。 return this.tableData.length * this.itemSize;
        },
        // //オフセットに対応するスタイル
        getTransform() {
            `translate3d(0,${this.startOffset}px,0)` を返します。
        },
        //実際の表示リストデータを取得する visibleData () {
            tableBody = document.querySelector('#dataTable >.el-table__body-wrapper') とします。
            if (テーブル本体) {
                tableBody.style.transform = this.getTransform
            }
            this.tableData.slice(this.start, Math.min(this.end, this.tableData.length)) を返します。
        }
    },
データ（） {
    戻る {
        テーブルデータ:[],
        //オフセット開始オフセット: 0,
        //開始インデックス start: 0,
        //終了インデックス end: null,
    };
},
方法:{
    ハンドルスクロール（）{
        // これはスクロール ボックスです。スクロール位置がテーブルの場合は、それに応じて変更するだけです。オフセットを割り当てる場所もあります。let scrollTop = document.getElementById('main-inner-content').scrollTop;
        // // この時点での開始インデックス this.start = Math.floor(scrollTop / this.itemSize);
        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;
    }
},
マウントされた(){
    window.addEventListener("スクロール", this.handleScroll, true);
},
破壊された()
    window.removeEventListener('scroll', this.handleScroll, true) // スクロールバーのスクロールイベントをクリアします}

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

.省略テキスト{
    単語折り返し: 単語を区切る; 
    オーバーフロー: 非表示; 
    テキストオーバーフロー: 省略記号; 
    ディスプレイ: -webkit-box; 
    -webkit-box-orient: 垂直;  
    -webkit-line-clamp: 2; 
}