preface

  • We use tables a lot. If we have a lot of data, we can paginate it, but inevitably there will be cases where we need to show many items on a page, or we don’t need pagination.
  • At this time if pure display is better, if the list can be edited, it will become card is not good, click a drop-down box, drop-down box will pop out for a long time. This is very affecting the use of users.

solution

  • First of all, I considered whether the page was stuck due to the slow data loading, so I adopted the scrolling loading method. After obtaining data first, I loaded 100 pieces of data first. Load the page as you scroll, so that you load it in batches, reducing the stress of loading too much data the first time. There was no problem at the beginning, but when the data became more and more later, when I clicked the editable drop-down box in the table, I felt the page became jammed obviously.
  • The idea is that if I only load the data in the area that the page can see, then I should be able to solve the page lag problem.

The specific implementation

Get 10/20 pieces of data at the beginning of loading (this can be calculated by calculating the height of each row/the height of the page display data, or fixed value), listen to the scroll bar during scrolling, and calculate the data of the page display according to the distance of scrolling.

Prerequisites That must be met

  • The total height of the list 
    Total data length x height of each rowCopy the code

    If you only have the height displayed on the page, you cannot scroll to get new data

  1. The height of each row

    If it's a fixed height you can write down the number and if it's a dynamic height you can calculate itCopy the code

  2. The offset of scrolling

    Current scrolling distance - (current scrolling distance % Height of each line)Copy the code

  3. The starting and ending indexes of the data displayed on the page

    Start index = math.floor (current scroll distance/height of each row)Copy the code

Code steps


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

    </el-table>
</div>
Copy the code
Computed: {// // total listHeight listHeight () {// tableData is the total number of interfaces to get return this.tabledata.length * this.itemsize; }, // // offset corresponding to 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 index start: 0, // end index end: null,}; }, methods:{handleScroll () {handleScroll () { 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; // // Offset 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 () the window. The removeEventListener (' scroll ', enclosing handleScroll, true) / / clear rolling the scroll event}Copy the code

Only ten data loads as the page scrolls

Determine page presentation by offset

The problem

  1. I set the total height for the entire el-Table, and then set the offset for the boxes of the list items below. If the page needs to retrieve data without refreshing it (such as paging), be sure to initialize the data, otherwise the page will display the previous data directly 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
Copy the code

  1. In order to facilitate calculation and use, THE height of each line of the page is fixed and the way is beyond the ellipse. However, after deploying the pre-deployment environment, it will be found that the code of -webkit-box-orient: vertical is directly removed and not displayed.

    -webkit-box-orient: vertical” style=”-webkit-box-orient: vertical

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

reference

Juejin. Cn/post / 684490…

Codesandbox. IO/s/virtualli…