A brief discussion on using virtual lists to optimize tables in el-table

Preface

We often use tables. If the amount of data is large, we can directly paginate it, but it is inevitable that there will be some situations where many items need to be displayed on one page, or there is no need for pagination.

At this time, it would be fine if it is just for display, but if the list is editable, it will become very stuck. When you click on the drop-down box, it will take a long time to pop up. This greatly affects user usage.

Solution

• First, I considered whether the page freeze was caused by slow data loading, so I adopted the scrolling loading method. After obtaining the data, I loaded 100 pieces of data first. Loading the data into the page while scrolling can reduce the pressure of loading too much data for the first time. There was no problem at the beginning, but when there was more and more data, I could clearly feel the page getting stuck when I clicked the editable drop-down box in the table.
• What I thought later was that if I only loaded the data in the area visible on the page, then the problem of page lag should be solved.

Specific implementation

When loading, get 10/20 pieces of data (this can be calculated by the height of each row/the height of the page display data, or a fixed value), monitor the scroll bar when scrolling, and calculate the data of the display page based on the scrolling distance.

Prerequisites to be met

The total height of the list

Total data length × height of each row

If the page is only as high as it is displayed, you cannot scroll to get new data.

The height of each row

If the height is fixed, you can write a hard value. If the height is dynamic, you can calculate it.

Scroll offset

Current scroll distance - (current scroll distance % height of each row)

The starting index and ending index of the data displayed on the page

The starting index is 0 at the beginning
During the scrolling process, the starting index = Math.floor (the current scrolling distance / the height of each row)

Code Steps

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

    </el-table>
</div>

computed: {
        // //Total list height listHeight () {
            // tableData is the total data of the interface return this.tableData.length * this.itemSize;
        },
        // //The style corresponding to the offset
        getTransform () {
            return `translate3d(0,${this.startOffset}px,0)`;
        },
        //Get the actual display list data 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:[],
        //Offset startOffset: 0,
        //Starting index start: 0,
        //End index end: null,
    };
},
methods:{
    handleScroll () {
        // This is a scrolling box. If the scrolling position is a table, just change it accordingly. There is also a place to assign an offset. let scrollTop = document.getElementById('main-inner-content').scrollTop;
        // //The starting index at this time this.start = Math.floor(scrollTop / this.itemSize);
        if (this.start < 0) this.start = 0;
        // //The end index at this time this.end = this.start + 10;
        // //The offset at this time 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) // Clear scroll bar scroll events}

When the page scrolls, only ten pieces of data will be loaded and the page display will be determined by the offset.

question

I set the total height for the entire el-table, and then set the offset for the box of the list item below. If the page needs to re-acquire data without refreshing (such as paging), the data must be initialized, otherwise the page will directly display the previous data or the page will be blank.

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

For the convenience of calculation and use, I use a fixed height for each line of the page and use the excess omission method. However, after deploying the pre-release environment, you will find that the code -webkit-box-orient: vertical is directly gone and not displayed.
Solution: Write inline style style="-webkit-box-orient: vertical" and it will work

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

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

This concludes this article on using virtual lists in el-table to optimize tables. For more el-table optimization content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!