浅谈el-table中使用虚拟列表对对表格进行优化

<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:[],
        //偏移量
        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', this.handleScroll, true) //  清除滚条滚动事件
}

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

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