关于ElementUI的table滚动加载数据的处理


需求:当tableData大于20条数据时,只加载20条数据。滚动到表格底部再加载20条数据直至所有数据加载完成

解决:

给el-table标签添加ref:table

this.$refs.table.bodyWrapper.addEventListener('scroll', (res) => { // 监听滚动事件
        const height = res.target

        const clientHeight = height.clientHeight // 表格视窗高度 即wraper
        const scrollTop = height.scrollTop // 表格内容已滚动的高度
        const scrollHeight = height.scrollHeight // 表格内容撑起的高度
        if (clientHeight + scrollTop === scrollHeight) {
          // 表格滚动已经触底 更新表格数据
     // this.times += 1
   // const length = 20*this.times > this.baseData.length ?  this.baseData.length : 20*this.times
   // this.tableData = this.baseData.slice(0,length)
        }
      }, true)


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM