element table滚动到底部加载数据(vue3)

效果图
在这里插入图片描述
使用插件el-table-infinite-scroll

npm install --save el-table-infinite-scroll

局部导入
在这里插入图片描述

<template>
	<div class="projectTableClass">
		<el-table v-el-table-infinite-scroll="load">
		</el-table>
	</div>
</template>
<script setup lang="ts">
import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
const load = () => {
	console.log("触发了");
};
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3中的`el-table`组件是Element UI库中的表格组件,它支持滚动加载数据(通常称为无限滚动或懒加载)。当用户滚动到表格底部时,如果还有更多数据未展示,滚动加载功能会自动向服务器请求下一页的数据并更新表格内容。 以下是实现滚动加载的基本步骤: 1. 配置`el-table`:设置`scroll-y`属性为true,开启垂直滚动,并给需要监听滚动事件的元素添加`@scroll`事件处理器。 ```html <template> <el-table :data="tableData" :height="tableHeight" @scroll="loadMore"> <!-- ...表头... --> </el-table> </template> <script> export default { data() { return { tableData: [], // 初始数据 tableHeight: '400px', // 设置固定高度或动态计算 page: 1, // 当前页数 pageSize: 10, // 每页显示的行数 }; }, methods: { loadMore() { if (this.tableBottomReached()) { // 判断是否到达底部 this.fetchMoreData(); // 发送请求加载更多数据 } }, fetchMoreData() { this.page++; // 加一,请求下一页 // 这里发送异步请求获取更多数据,例如: axios.get('api/data?page=' + this.page) .then(response => { const newData = response.data; // 新的数据 // 将新数据合并到已有数据中 this.tableData.push(...newData); }) .catch(error => { console.error('Failed to load more data:', error); }); }, tableBottomReached() { // 返回滚动条距离文档底部的距离小于等于某个阈值时的布尔值 const scrollEl = document.querySelector('.el-table'); const clientHeight = scrollEl.clientHeight; const scrollTop = scrollEl.scrollTop + clientHeight; const scrollHeight = scrollEl.scrollHeight; return scrollTop >= scrollHeight - clientHeight; } }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值