element-ui 使用v-infinite-scroll,适应页面大小
时间: 2023-06-19 14:07:59 浏览: 382
el-table-infinite-scroll:El-Table无限滚动
5星 · 资源好评率100%
`v-infinite-scroll` 是 Element UI 提供的一个指令,用于实现页面滚动到底部时自动加载更多数据的功能。要适应页面大小,你可以在使用 `v-infinite-scroll` 指令时,设置一个动态的阈值 `distance`。例如:
```html
<el-table v-infinite-scroll="loadMore" :infinite-scroll-disabled="isLoading" :distance="tableHeight">
<!-- 表格内容 -->
</el-table>
```
在上面的示例中,我们使用了 `tableHeight` 变量来设置 `distance` 的值,这样 `distance` 的值就会随着表格高度的变化而变化。当页面滚动距离离底部还有 `tableHeight` 的距离时,就会触发 `loadMore` 方法,加载更多数据。
你可以根据实际情况调整 `distance` 的值,以达到最佳的用户体验。
阅读全文