element The implementation of shuttle box performance optimization

background

When the shuttle box processes large data volume, the page is stuttered due to too many rendered DOM nodes.
Optimize without changing the original logic of the component as much as possible.

Solution

Lazy loading - InfiniteScroll component
First copy the original component from packages/transfer (or repackage and repackage the source code to maintain the private library)
Will

v-infinite-scroll="pageDown"
:infinite-scroll-immediate="false"

Add to

<el-checkbox-group
        v-show="!hasNoMatch &&  > 0"
        v-model="checked"
        :size="size"
        :class="{ 'is-filterable': filterable }"
        class="el-transfer-panel__list"
        v-infinite-scroll="pageDown"
        :infinite-scroll-immediate="false"
      >
        <el-checkbox
          class="el-transfer-panel__item"
          :label="item[keyProp]"
          :disabled="item[disabledProp]"
          :key="item[keyProp]"
          v-for="item in filteredData">
            <option-content :option="item"></option-content>
        </el-checkbox>
</el-checkbox-group>

Define pageSize: 20 to represent the number of data per page showData: [] only to display and replace the data that actually needs to be operated in the above code filteredData

 v-for="item in showData">

At the same time, the corresponding processing in the watch

data (data) {
    const checked = [];
     = (0, );

    const filteredDataKeys = (
    (item) => item[]
    );
    ((item) => {
    if ((item) > -1) {
        (item);
    }
    });
     = false;
     = checked;
},
filteredData (filteredData) {
     = (0, );
 }

The number of initialized displays is available for 20 here.

Finally add the method called when scrolling to the bottom

pageDown () {
    const l = ;
    const totalLength = 
    l < totalLength && 
    ( = (0, l +  > totalLength ?
    totalLength : l + ));
},

When scrolling down, the displayed data length increases by 20 (the quantity is random), and the maximum display length is exceeded.

This basically solves the problem of lag in large data operations. Because the presentation and logic layers are separated, all operational logic of the component does not need to be modified, minimizing differences.

New question

Manually scrolling to the end of the list and then searching still has lag problems.

Advanced

During the scrolling process, the data at the top is still unseen. If the data is not displayed, it will have no impact on the user experience.
So just display the 20 pieces of data on the current page.

We add a ref=scrollContainer to el-checkbox-group to operate the scrollbar.

Define the current number of pages in data curIndex: 1

And modify the pageDown method

    pageDown () {
      const totalLength = 
      if((*) &lt; totalLength){
         ++
        const targetLength =  *  
        const endPoint = targetLength &gt; totalLength ? totalLength : targetLength
        const startPoint = endPoint -   &gt; 0 ? endPoint -  : 0
         = (startPoint, endPoint);
        this.$.$ = "1px" //The scroll bar is to the top end and connect to the next page. It is 0. It may trigger a boundary problem.      }
    }

To do this we also need to add a method of turning pages up

InfiniteScroll instruction Only scroll down，我们可以拓展该instruction亦可自行添加上滑滚动监听
    mounted(){
        this.$.$('scroll', )
    },
    beforeDestroy(){
        this.$.$('scroll', )
    },

    pageUp(e){
      if( ===0 &amp;&amp; &gt;1){
         --
        const endPoint =  *  
        const startPoint = (-1)*  
         = (startPoint, endPoint);
        const el = this.$.$el
         =  -  - 1 // Scroll to the bottom and connect to the previous page, -1 to prevent boundary problems.      }
    },

When data operations are performed, the page content changes, and the scroll bar will also change. To prevent unpredictable page turnover, when data changes, reset the scroll bar and the current page number.

    initScroll(){
         = 1
        this.$.$ = 0
    },

At the same time, initScroll is executed in the watch accordingly.

    data(){
        ...
        ()
        ...
    },
    filteredData (filteredData) {
      ...
      ()
    }

At this point, the performance of large data shuttle boxes has been greatly improved.

This is the end of this article about the implementation of element shuttle box performance optimization. For more related element shuttle box performance optimization content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!