文章目录
概要
简化的实现示例：
小结
概要
在使用 Element UI 的 Table 组件时，如果需要实现滚动分页加载的功能，可以通过监听 Table 的滚动事件来动态加载更多数据。
简化的实现示例：
<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.bodyWrappertable.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，则停止加载数据。
