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

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) }) }, }