element table 滚动到底加载剩余内类似于分页内容显示在同一页

最新推荐文章于 2024-12-04 17:38:08 发布

weixin_41925480

最新推荐文章于 2024-12-04 17:38:08 发布

阅读量553

点赞数

文章标签： vue elementui

原文链接：https://juejin.im/post/6844903765582020621

版权

这篇博客记录了如何在Vue.js应用中实现elementtable组件的滚动加载功能。当表格滚动到底部时，通过监听滚动事件判断是否加载更多数据，更新页码并调用接口获取新数据，将新数据追加到已有数据列表中，直至所有数据加载完毕。此方法优化了页面性能，避免了一次性加载大量数据。

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

element table 滚动到底部加载剩余内容

转自 https://juejin.im/post/6844903765582020621

记录一下根据原博主的理解，写的一些适用于自己项目的修改，整理一下

 data() {
    return {
      total: 0,
      isScrollOver: true, // 下拉数据是否已经加载完成
      pageData: { // 表格数据加载时，带入的参数
        dmId: '', 
        idList: '',
        isReportWorkOrNot: 0,
        pageCode: 1, // 当前页
        pageSize: 20 // 每页几条
      }
  }

主要是这里监听滚动到底了

  mounted() {
  // 监听页面滚动条到最底部了 进行table懒加载   
    _this.$refs.table.bodyWrapper.addEventListener('scroll', (res) => {
      const height = res.target
      const clientHeight = height.clientHeight
      const scrollTop = height.scrollTop
      const scrollHeight = height.scrollHeight
      // total总数据量
      if (clientHeight + scrollTop >= scrollHeight && _this.total > _this.list.length) {
        console.log('到底了')
        _this.pageData.pageCode++
        // 识别是否重复滚动到底
        if (_this.isScrollOver) {
          _this.isScrollOver = false
          _this.pageData.dmId = _this.stId
          getListByDmId(_this.pageData).then(res => {
            if (res) {
              // 在原来数据上加上
              _this.list = _this.list.concat(res.data)
              _this.isScrollOver = true
            }
          }).catch(error => {
            console.log(error)
          })
        }
      }
    }, true)
}，

获取table值

methods: {
  	getList() {
      const _this = this
      _this.pageData.dmId = _this.stId
      getListByDmId(_this.pageData).then(res => {
        if (res) {
          _this.list = res.data
          this.total = res.total
          _this.loading = false
        }
      }).catch(error => {
        console.log(error)
      })
    },
  }