Code example for listening to element-ui table scroll events

What this article brings to you is a code example for monitoring element-ui table scrolling events. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

Background: When working on a management platform project, element-ui is used, and the latest data needs to be obtained by monitoring the scrolling position of the el-table. So how to monitor the scrolling of the el-table?

Preparation: Our default technology stack is vue element-ui

template code:

<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>

Binding listening event

    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)
            }
        })
    }

obtained After adding the new data, adjust the position of the scroll bar

    getMoreLog() {
        ...
        this.dom.scrollTop = this.dom.scrollTop - 100
        ...
    }

Conclusion: So far we have completed the binding to the table!

This article has ended here. For more other exciting content, you can pay attention to the JavaScript Video Tutorial column on the PHP Chinese website!

The above is the detailed content of Code example for listening to element-ui table scroll events. For more information, please follow other related articles on the PHP Chinese website!