今回は element-ui がテーブルスクロール効果をどのように操作するかを説明します。 element-ui がテーブルスクロールを操作する際の 注意事項 について説明します。
スクロールイベントをリッスンするグローバル登録eventを追加します
window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-tablebody-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 100 const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight if (scrollDistance <= sign) { binding.value() } }) } })
signは位置をマークするために使用されますscrollDistance ===signを直接指定しても、毎回トリガーされるとは限りませんので、一定の間隔で。頻繁なトリガーの問題については後で説明します。
イベントの追加
ワイヤレスでロードする必要があるカスタムイベントをフォームに追加します(v-loadmore="loadMore")。トリガーされるイベントをメソッドで定義します
loadMore () { if (this.loadSign) { this.loadSign = false this.page++ if (this.page > 10) { return } setTimeout(() => { this.loadSign = true }, 1000) console.log('到底了', this.page) } }
以上がelement-ui がテーブルスクロール効果を操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。