Dieser Artikel bietet Ihnen ein Codebeispiel für die Überwachung von Element-UI-Tabellen-Scrolling-Ereignissen. Freunde in Not können darauf verweisen . helfen.
Hintergrund: Bei der Arbeit an einem Verwaltungsplattformprojekt wird element-ui verwendet und die neuesten Daten müssen durch Überwachung der Scrollposition der EL-Tabelle abgerufen werden -Tisch?
Vorbereitung: Unser Standard-Technologie-Stack ist vue+element-ui
Vorlagencode:
<el-table
:data="logList"
:show-header="false"
row-class-name="table-row-class"
height="700"
ref="table"
@row-click="rowClick">
<el-table-column type="expand">
<el-table-column
label="log信息"
prop="message">
</el-table-column>
</el-table>Bind-Listening-Ereignis
mounted() {
// 获取需要绑定的table
this.dom = this.$refs.table.bodyWrapper
this.dom.addEventListener('scroll', () => {
// 滚动距离
let scrollTop = this.dom.scrollTop
// 变量windowHeight是可视区的高度
let windowHeight = this.dom.clientHeight || this.dom.clientHeight
// 变量scrollHeight是滚动条的总高度
let scrollHeight = this.dom.scrollHeight || this.dom.scrollHeight
if (scrollTop + windowHeight === scrollHeight) {
// 获取到的不是全部数据 当滚动到底部 继续获取新的数据
if (!this.allData) this.getMoreLog()
console.log('scrollTop', scrollTop + 'windowHeight', windowHeight + 'scrollHeight', scrollHeight)
}
})
}Get After getting die neuen Daten, passen Sie die Position der Bildlaufleiste an
getMoreLog() {
...
this.dom.scrollTop = this.dom.scrollTop - 100
...
}Fazit: Bisher haben wir die Anbindung an die Tabelle abgeschlossen!
Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte JavaScript-Video-Tutorial auf der chinesischen PHP-Website!
Das obige ist der detaillierte Inhalt vonCodebeispiel zum Abhören von Element-UI-Tabellen-Scroll-Ereignissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
