ホームページ >ウェブフロントエンド >jsチュートリアル >element-uiでテーブルテーブルをスクロールする方法
今回は element-ui でテーブルtableをスクロールする方法を説明します。 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() } }) } })
標識は場所を示すために使用されます
scrollDistance === 記号を直接指定しても、毎回トリガーされることが保証されないため、間隔で表されます。頻繁なトリガーの問題については後で説明します。
イベントを追加
ワイヤレスでロードする必要があるテーブルにカスタム イベントを追加します (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) } }
this.loadSign は、ページが増加し続けるかどうかをマークするために使用されます。この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
ファイルアップロード用のAjaxUpLoad.jsVueのカルーセルコンポーネントの使用方法以上がelement-uiでテーブルテーブルをスクロールする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。