如何实现elementui中固定表头的表格滚动到底部后加载更多
时间: 2023-02-08 13:47:14 浏览: 135
要实现在 element-ui 中固定表头并滚动到底部加载更多数据,需要使用 el-table 组件中的 "body-style" 属性和 "scroll" 属性。
1. 使用 "body-style" 属性设置表格内容的高度和 overflow 属性。例如:
```
<el-table :data="tableData" body-style="height: 200px;overflow-y: auto;">
```
2. 使用 "scroll" 属性设置表格滚动的宽度和高度。例如:
```
<el-table :data="tableData" :body-style="{height: '200px',overflow: 'auto'}" :scroll="{y: '200px'}">
```
3. 然后监听滚动条滚动事件,判断是否已滚动到底部,然后加载更多数据
```
<el-table ref="elTable" :data="tableData"
:body-style="{height: '200px',overflow: 'auto'}"
:scroll="{y: '200px'}"
@scroll="handleScroll"
>
</el-table>
methods: {
handleScroll(event) {
//event.srcElement 就是el-table-body,可以判断是否已滚动到底部
if (event.srcElement.scrollHeight - event.srcElement.scrollTop === event.srcElement.clientHeight) {
//加载更多数据
...
}
}
}
```
阅读全文