el-table监听表格滚动
时间: 2023-05-24 12:03:10 浏览: 955
A:可以通过监听 `scroll` 事件来实现 el-table 表格的滚动监听。具体实现如下:
```html
<template>
<el-table
ref="table"
:data="tableData"
height="400"
style="width: 100%"
@scroll="handleTableScroll"
>
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
{ date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
{ date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' },
{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }
]
}
},
methods: {
handleTableScroll(event) {
// 获取 el-table 的 body 元素
const bodyWrapper = this.$refs.table.$refs.bodyWrapper
// 判断滚动到底部
if (bodyWrapper.scrollTop + bodyWrapper.clientHeight >= bodyWrapper.scrollHeight) {
console.log('滚动到底部了')
}
}
}
}
</script>
```
在上面的代码中,我们通过 `@scroll="handleTableScroll"` 监听了 el-table 的滚动事件,并在 `handleTableScroll` 中进行了滚动到底部的判断。具体实现中,我们获取 el-table 的 `body` 元素,然后通过比较 `scrollTop` 和 `scrollHeight` 来判断是否滚动到底部。如果触发了滚动到底部的条件,那么就可以执行对应的逻辑。
阅读全文