elementui table滚动分页加载

文章目录

概要

在使用 Element UI 的 Table 组件时，如果需要实现滚动分页加载的功能，可以通过监听 Table 的滚动事件来动态加载更多数据。

简化的实现示例：

javascript 复制代码

<template>
    <el-table ref="scrollTable" :data="tableData" height="400">
        <!-- 列配置 -->
    </el-table>
</template>
<script>
export default {
    components: {},
    data() {
        return {
            tableData: [],
            page: 1,
            pageSize: 10,
            total: 100, // 假设总数据量为 100
        }
    },
    computed: {},
    mounted() {
        /**
         * @description:添加分页加载滚动事件
         * @return {*}
         */
        let table = this.$refs.scrollTable.bodyWrapper
        table.addEventListener('scroll', (e) => {
            const { scrollTop, clientHeight, scrollHeight } = e.target
            // 检查是否滚动到底部
            if (scrollHeight - scrollTop <= clientHeight) {
                this.page++
                if ((this.page - 1) * this.pageSize >= this.total) {
                    // 数据已全部加载完毕
                    return
                }
                this.getTableData()
            }
        })
    },

    created() {
        this.getTableData()
    },
    methods: {

        /**
         * @description:获取表格数据
         * @return {*}
         */
        getTableData() {
            let params = {
                size: this.pageSize,
                current: this.page
            }
            this.$http({ method: 'get', url: `/hello/william/page?`, params })
                .then((res) => {
                    this.tableData.push(...res.data.records)
                    this.total = res.data.total
                })
                .finally(() => { })
        },

    }
}
</script>

小结

在这个例子中，我们设置了表格的 height 属性，使其具有固定高度并可以滚动。监听 scroll 事件，当表格滚动到底部时，触发scroll 事件。在scroll 事件中，我们通过当前的 page 和 pageSize 计算已经加载的数据范围，并更新 tableData 以添加新数据。如果加载的数据超过了 total，则停止加载数据。