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

    </el-table>
</div>

computed: {
        // //列表總高度
        listHeight () {
            // tableData 是獲取接口的總數(shù)據(jù)
            return this.tableData.length * this.itemSize;
        },
        // //偏移量對應(yīng)的style
        getTransform () {
            return `translate3d(0,${this.startOffset}px,0)`;
        },
        //獲取真實顯示列表數(shù)據(jù)
        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,
        //結(jié)束索引
        end: null,
    };
},
methods:{
    handleScroll () {
        // 這個是滾動的盒子,如果滾動的位置是table,這里也對應(yīng)的改下就好了，還有偏移量賦值的地方
        let scrollTop = document.getElementById('main-inner-content').scrollTop;
        // //此時的開始索引
        this.start = Math.floor(scrollTop / this.itemSize);
        if (this.start < 0) this.start = 0;
        // //此時的結(jié)束索引
        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; 
}