<template>
<div ref="tableContainer" class="table-container" @scroll="handleScroll">
<el-table
:data="tableData"
style="width: 100%"
@row-click="handleRowClick">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
</el-table>
<div v-if="isLoading" class="loading">加载中...</div>
<div v-if="!hasMore" class="loading">已到底</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
pageSize: 20,
currentPage: 1,
isLoading: false,
hasMore: true,
};
},
created() {
this.fetchData();
},
methods: {
fetchData() {
if (this.isLoading || !this.hasMore) return;
this.isLoading = true;
// 模拟API请求
setTimeout(() => {
const newData = Array.from({ length: this.pageSize }, (_, index) => ({
date: `2023-04-${(this.currentPage - 1) * this.pageSize + index + 1}`,
name: `用户${(this.currentPage - 1) * this.pageSize + index + 1}`,
}));
this.tableData=this.tableData.concat(newData)
this.currentPage++;
this.isLoading = false;
// 假设有更多数据的逻辑
if (this.tableData.length >= 100) {
this.hasMore = false;
}
// 使用 Vue.nextTick 来确保 DOM 更新完成
this.$nextTick(() => {
// 获取滚动容器
const container = this.$refs.tableContainer;
// 检查容器是否存在且可滚动
if (container && container.scrollHeight > container.clientHeight) {
container.scrollTop = container.scrollTop - 900;
// 如果滚动位置已经接近顶部,则不再向上滚动
if (container.scrollTop < 50) {
container.scrollTop = 0;
}
}
});
}, 1000);
},
handleScroll(event) {
const { scrollTop, scrollHeight, clientHeight } = event.target;
// 触底条件
if (scrollTop + clientHeight >= scrollHeight-10 ) {
this.fetchData();
}
},
handleRowClick(row, column, event) {
// 行点击事件处理
console.log(row);
},
},
};
</script>
<style>
.table-container {
margin: 0 auto;
width: 400px;
height: 400px; /* 设置容器高度以触发滚动 */
overflow: auto; /* 允许Y轴滚动 */
}
.loading {
padding: 20px;
}
</style>
07-24
773
07-25