element 穿梭框性能優(yōu)化的實(shí)現(xiàn)
背景
穿梭框處理大數(shù)據(jù)量時(shí),由于渲染的 DOM 節(jié)點(diǎn)過多，造成頁面卡頓的問題。
在盡量不改變組件原有邏輯的前提下，進(jìn)行優(yōu)化。
解決思路
懶加載 - InfiniteScroll 組件
先從 packages/transfer 中將原組件拷出（或者改源碼重新打包維護(hù)私有庫使用）
將
v-infinite-scroll="pageDown" :infinite-scroll-immediate="false"
添加到
<el-checkbox-group
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"
>
<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>
在data中定義pageSize: 20 用來表示每頁數(shù)據(jù)個(gè)數(shù)showData: [] 僅用來展示使用，替換上述代碼中實(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ù)長度增加 20（數(shù)量隨意）, 超出時(shí)展示最大長度。
由此基本解決大數(shù)據(jù)量操作卡頓的問題。由于展示和邏輯層分開，組件的所有操作邏輯無須修改，最小程度減少差異。
新問題
手動(dòng)滾動(dòng)到列表末端，再進(jìn)行搜索操作依然存在卡頓問題。
進(jìn)階
在滾動(dòng)過程中，實(shí)際上頂端的數(shù)據(jù)依舊無法看見，該數(shù)據(jù)不展示，對(duì)用戶體驗(yàn)也沒有影響，
所以只需展示當(dāng)前頁的 20 條數(shù)據(jù)。
我們?yōu)閑l-checkbox-group添加一個(gè) ref=scrollContainer 以便操作滾動(dòng)條，
在data中定義當(dāng)前頁數(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)條到最上端，銜接下一頁，為 0 可能會(huì)觸發(fā)邊界問題
}
}
為此我們還需要添加向上翻頁的方法
InfiniteScroll 指令 只提供向下滾動(dòng)，我們可以拓展該指令亦可自行添加上滑滾動(dòng)監(jiān)聽
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)到最底部，銜接上一頁， -1 防止邊界問題。
}
},
當(dāng)進(jìn)行數(shù)據(jù)操作的時(shí)候，頁面內(nèi)容變化，滾動(dòng)條也會(huì)隨之變化，為防止不能預(yù)知的翻頁，數(shù)據(jù)改變時(shí)，重置滾動(dòng)條和當(dāng)前頁碼。
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ù)量的穿梭框，性能大為改善。
到此這篇關(guān)于element 穿梭框性能優(yōu)化的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)element 穿梭框性能優(yōu)化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
最近翻閱了一下vue。發(fā)覺有一個(gè)單文件組件之前基本忽視掉了。所以本文就詳細(xì)的介紹了vue單文件組件的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
vue路由前進(jìn)后退動(dòng)畫效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue路由前進(jìn)后退動(dòng)畫效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-12-12
vue?模板循環(huán)繪制多行上傳文件功能實(shí)現(xiàn)
這篇文章主要為大家介紹了vue?模板循環(huán)繪制多行上傳文件功能實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了vue2響應(yīng)式的缺點(diǎn)影響，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05
本文主要介紹了Vue3中響應(yīng)式解構(gòu)props的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
懶加載是一種網(wǎng)頁優(yōu)化技術(shù)，也被稱為延遲加載，它的主要目的是在網(wǎng)頁加載時(shí)，只加載當(dāng)前可見區(qū)域內(nèi)的內(nèi)容，而延遲加載其他不可見區(qū)域的內(nèi)容，從而提高網(wǎng)頁的加載速度和性能，這篇文章主要介紹了vue圖片懶加載的兩種方法,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue-router路由傳參及隱藏參數(shù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue計(jì)算屬性+vue中class與style綁定(推薦)
這篇文章主要介紹了vue計(jì)算屬性+vue中class與style綁定,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
這篇文章主要介紹了vue單文件組件無法獲取$refs的問題,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
使用vuex的state狀態(tài)對(duì)象的5種方式
本文給大家介紹了使用vuex的state狀態(tài)對(duì)象的5種方式，給大家貼出了我的vuex的結(jié)構(gòu)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-04-04