elementUi table實現滾動載入

2022-09-07 07:18:08 字數 835 閱讀 7254

第一步:在main.js裡註冊

vue.directive('loadmore', })}

})

注意:

scrollheight:指元素的總高度,包含滾動條中的內容。唯讀屬性。不帶px單位。就是下圖中,54條資料的高度,但是因為有滾動條,所以螢幕看不到這麼高

scrolltop:當元素出現滾動條時,向下拖動滾動條,內容向上滾動的距離。可讀可寫屬性。不帶px單位。如果該元素沒有滾動條,則scrolltop的值為0,該值只能是正值。就是下圖中紅色框的高度

clientheight:元素客戶區的大小,指的是元素內容及其邊框所佔據的空間大小,實際上就是可視區域的大小。就是下圖紅色箭頭的高度

scrollheight-scrolltop-clientheight=0,這個時候可以就是滾動條滾到底部的時候了。(如果**有padding,margin值,需要減去)

第二步:在元件中,使用自定義的事件

v-loadmore=「loadmore」

在methods中呼叫loadmore

//**滾動載入

tableloadmore ()

}).then(res=>)

}else

}

匯出

}取 消

確 定

Element UI table排序問題

專案需求 選擇框與 的排序列雙向繫結 選擇器 表頭行 placeholder 請選擇 el option el select ref singletable data tabledata default sort tableattribute.sortmethod sort change chang...

elementUI table選中問題

首先說一下我的問題 table可以翻頁,可以選中,選中之後翻頁回來需要預設勾選已經選中的。解決 首先監聽table的選中狀態,用 select,這樣選中的資料不會被清空,在table翻頁請求之後,用 select 監聽的資料和請求後的資料做對比,如果一樣,this.refs.multipletabl...

如何動態渲染elementUI table的行和列

高階寫在最後 近日專案中遇到這樣乙個需求 需要動態渲染乙個列表的行和列,官網給出的例子大多是列寫死的,行動態生成的,但是如何實現動態渲染行和列呢?後來我查詢了一下實現了該功能,如下我將總結一下然後貼上 talk is cheap,show me the code retained datalist ...