帮我写vue加elementui table判断页面触底

当用户滚动到页面底部时，可以触发一个函数来加载更多数据。以下是一个示例代码：

<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>

<script>
export default {
data() {
return {
tableData: [],
currentPage: 1,
pageSize: 10,
total: 100
}
},
mounted() {
this.loadData()
},
methods: {
loadData() {
// 模拟异步加载数据
setTimeout(() => {
const newData = []
for (let i = 0; i < this.pageSize; i++) {
const index = (this.currentPage - 1) * this.pageSize + i
newData.push({
name: `用户${index}`,
age: 20 + i,
address: `地址${index}`
})
}
this.tableData = this.tableData.concat(newData)
this.currentPage++
}, 1000)
},
handleScroll(event) {
const table = event.target
const scrollHeight = table.scrollHeight
const scrollTop = table.scrollTop
const clientHeight = table.clientHeight
if (scrollHeight - scrollTop === clientHeight) {
this.loadData()
}
}
},
mounted() {
this.loadData()
}
}
</script>

<style>
.el-table__body-wrapper {
max-height: 400px;
overflow-y: auto;
}
</style>

在这个示例中，我们使用了 element-ui 的表格组件 el-table，并且将数据绑定到了 tableData 变量上。在 mounted 钩子函数中，我们调用了 loadData 函数来加载第一页数据。loadData 函数模拟了异步加载数据的过程，每次加载 pageSize 条数据，然后将数据追加到 tableData 中，并且将 currentPage 加 1。

在 el-table 上添加了一个滚动事件监听器 handleScroll，当用户滚动到底部时，会触发 handleScroll 函数。在 handleScroll 函数中，我们通过计算表格的滚动高度、滚动位置和可见高度，来判断用户是否已经滚动到了底部。如果滚动到了底部，就调用 loadData 函数来加载更多数据。