el-table不使用分页组件，仅滚动条实现加载下一页数据

最新推荐文章于 2025-05-20 16:45:03 发布

kogmini

最新推荐文章于 2025-05-20 16:45:03 发布

阅读量840

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js javascript elementui

本文链接：https://blog.youkuaiyun.com/csdnyp/article/details/136315835

本文介绍了如何在Vue应用中使用el-table实现表格滚动事件，当滚动到底部时自动加载下一页数据，同时处理了时间变化时的滚动重置问题，以减少无效请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <el-table ref="tableRef" :data="tableData" style="width: 100%" element-loading-text="加载中...">
    <el-table-column prop="time" label="时间" />
    <el-table-column prop="position" label="地点" />
    <el-table-column prop="figure" label="人物" />
</el-table>

给表格定义ref为tableRef，给表格内的滚动条定义ref为wrapRef，再定义一个布尔值判断滚动条是否滚动到底部

const tableRef = ref()//表格
const wrapRef = ref()//滚动条
const isScrollingBottom = ref(false)//滚动条是否滚动到底部

const queryParams = ref({
    current: 1,
    pageSize: 10,
    time:''
})
//接口请求数据
const getData= () => {
    http.get('你的请求url',queryParams.value).then(res => {
         //其它操作
        ......
    })
}
//滚动事件
const scrolling = async (event) => {
    let scrollHeight = event.target.scrollHeight
    let clientHeight = event.target.clientHeight
    isScrollingBottom.value = scrollHeight - clientHeight === event.target.scrollTop//是否滚动的底部

    if (isScrollingBottom.value) {
        //页码+1
        queryParams.value.current++;

        const res = await http.get('你的请求url', queryParams.value)
        if (res.data.code === 0) {
            //其它操作
            ......
        } else {
            //如果当前页码没有数据，自减1，避免页码一直在加1，获取不到正确的数据
            queryParams.value.current--;
        }
    }
}

onMounted(() => {
    getData()

    //获取表格内的滚动条，并监听滚动事件
    wrapRef.value = tableRef.value.$refs.scrollBarRef.wrapRef;
    wrapRef.value.addEventListener("scroll", scrolling);
})

注意：如果有改变查询条件的操作，比如改变时间，应该在改变时间的方法里对滚动条进行重置：wrapRef.value.scrollTop = 0;否则会导致发起很多个请求

const timeChange=> () => {
    queryParams.value.current = 1
    wrapRef.value.scrollTop = 0
    getData()
}