日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

本文轉(zhuǎn)載自微信公眾號(hào)「微醫(yī)大前端技術(shù)」，作者陳建波。轉(zhuǎn)載本文請(qǐng)聯(lián)系微醫(yī)大前端技術(shù)公眾號(hào)。

為錫林郭勒盟等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及錫林郭勒盟網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、錫林郭勒盟網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

element 穿梭框性能優(yōu)化

背景

穿梭框處理大數(shù)據(jù)量時(shí),由于渲染的 DOM 節(jié)點(diǎn)過(guò)多，造成頁(yè)面卡頓的問(wèn)題。在盡量不改變組件原有邏輯的前提下，進(jìn)行優(yōu)化。

解決思路

懶加載 - InfiniteScroll 組件

先從 packages/transfer 中將原組件拷出(或者改源碼重新打包維護(hù)私有庫(kù)使用

將

 
 
 

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

添加到

 
 
 

  
  
  

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

在data中定義pageSize: 20 用來(lái)表示每頁(yè)數(shù)據(jù)個(gè)數(shù)showData: [] 僅用來(lái)展示使用，替換上述代碼中實(shí)際需要操作的數(shù)據(jù) filteredData

 
 
 

  
  
  
v-for="item in showData"> 
 
 
 

同時(shí)在watch中相應(yīng)的處理

 
 
 

  
  
  
data (data) { 
  
  
  
    const checked = []; 
  
  
  
    this.showData = data.slice(0, this.pageSize); 
  
  
  
 
  
  
  
    const filteredDataKeys = this.filteredData.map( 
  
  
  
    (item) => item[this.keyProp] 
  
  
  
    ); 
  
  
  
    this.checked.forEach((item) => { 
  
  
  
    if (filteredDataKeys.indexOf(item) > -1) { 
  
  
  
        checked.push(item); 
  
  
  
    } 
  
  
  
    }); 
  
  
  
    this.checkChangeByUser = false; 
  
  
  
    this.checked = checked; 
  
  
  
}, 
  
  
  
filteredData (filteredData) { 
  
  
  
    this.showData = filteredData.slice(0, this.pageSize); 
  
  
  
 } 
 
 
 

初始化展示數(shù)量隨意這里取 20。

最后添加滾動(dòng)到底部時(shí)調(diào)用的方法

 
 
 

  
  
  
pageDown () { 
  
  
  
    const l = this.showData.length; 
  
  
  
    const totalLength = this.filteredData.length 
  
  
  
    l < totalLength &&  
  
  
  
    (this.showData = this.filteredData.slice(0, l + this.pageSize > totalLength ? 
  
  
  
    totalLength : l + this.pageSize)); 
  
  
  
}, 
 
 
 

往下滾動(dòng)的時(shí)候 展示的數(shù)據(jù)長(zhǎng)度增加 20(數(shù)量隨意), 超出時(shí)展示最大長(zhǎng)度。

由此基本解決大數(shù)據(jù)量操作卡頓的問(wèn)題。由于展示和邏輯層分開(kāi)，組件的所有操作邏輯無(wú)須修改，最小程度減少差異。

新問(wèn)題

手動(dòng)滾動(dòng)到列表末端，再進(jìn)行搜索操作依然存在卡頓問(wèn)題。

進(jìn)階

在滾動(dòng)過(guò)程中，實(shí)際上頂端的數(shù)據(jù)依舊無(wú)法看見(jiàn)，該數(shù)據(jù)不展示，對(duì)用戶(hù)體驗(yàn)也沒(méi)有影響， 所以只需展示當(dāng)前頁(yè)的 20 條數(shù)據(jù)。我們?yōu)閑l-checkbox-group添加一個(gè) ref=scrollContainer 以便操作滾動(dòng)條，

在data中定義當(dāng)前頁(yè)數(shù) curIndex: 1

并對(duì) pageDown 方法進(jìn)行修改

 
 
 

  
  
  
pageDown () { 
  
  
  
  const totalLength = this.filteredData.length 
  
  
  
  if((this.curIndex*this.pageSize) < totalLength){ 
  
  
  
    this.curIndex ++ 
  
  
  
    const targetLength = this.curIndex * this.pageSize  
  
  
  
    const endPoint = targetLength > totalLength ? totalLength : targetLength 
  
  
  
    const startPoint = endPoint - this.pageSize  > 0 ? endPoint - this.pageSize : 0 
  
  
  
    this.showData = this.filteredData.slice(startPoint, endPoint); 
  
  
  
    this.$refs.scrollContainer.$el.scrollTop = "1px" //滾動(dòng)條到最上端，銜接下一頁(yè)，為 0 可能會(huì)觸發(fā)邊界問(wèn)題 
  
  
  
  } 
  
  
  
} 
 
 
 

為此我們還需要添加向上翻頁(yè)的方法 InfiniteScroll 指令 只提供向下滾動(dòng)，我們可以拓展該指令亦可自行添加上滑滾動(dòng)監(jiān)聽(tīng)

 
 
 

  
  
  
mounted(){ 
  
  
  
        this.$refs.scrollContainer.$el.addEventListener('scroll', this.pageUp) 
  
  
  
    }, 
  
  
  
    beforeDestroy(){ 
  
  
  
        this.$refs.scrollContainer.$el.removeEventListener('scroll', this.pageUp) 
  
  
  
    }, 
 
 
 

注冊(cè)pageUp 方法

 
 
 

  
  
  
pageUp(e){ 
  
  
  
      if(e.target.scrollTop ===0 && this.curIndex>1){ 
  
  
  
        this.curIndex -- 
  
  
  
        const endPoint = this.curIndex * this.pageSize  
  
  
  
        const startPoint = (this.curIndex-1)* this.pageSize  
  
  
  
        this.showData = this.filteredData.slice(startPoint, endPoint); 
  
  
  
        const el = this.$refs.scrollContainer.$el 
  
  
  
        el.scrollTop = el.scrollHeight - el.clientHeight - 1 // 滾動(dòng)到最底部，銜接上一頁(yè)， -1 防止邊界問(wèn)題。 
  
  
  
      } 
  
  
  
    }, 
 
 
 

當(dāng)進(jìn)行數(shù)據(jù)操作的時(shí)候，頁(yè)面內(nèi)容變化，滾動(dòng)條也會(huì)隨之變化，為防止不能預(yù)知的翻頁(yè)，數(shù)據(jù)改變時(shí)，重置滾動(dòng)條和當(dāng)前頁(yè)碼。

 
 
 

  
  
  
initScroll(){ 
  
  
  
        this.curIndex = 1 
  
  
  
        this.$refs.scrollContainer.$el.scrollTop = 0 
  
  
  
    }, 
 
 
 

同時(shí)地，在watch中相應(yīng)時(shí)候執(zhí)行 initScroll

 
 
 

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

至此大數(shù)據(jù)量的穿梭框，性能大為改善。

網(wǎng)站題目：Element穿梭框性能優(yōu)化
網(wǎng)址分享：http://m.5511xx.com/article/ccdojpj.html