Vue ViewUI表格显示大量数据

需求

要求用户上传大量数据上传，经过后端处理，全部返回给前端（没有分页）。

问题

有时候用户上传数据会很大，一下子渲染到前端的话，表格会很卡，而且下载也很慢，所以要解决两个问题，下载慢，和渲染卡的问题。

解决

问题1 下载慢

我这个是和后端讨论，后端做了分页，然后前端分页去获取，但是前端不去分页显示。（具体思路是后端给返回最后一页和当前页的参数，我们去判断是不是已经是最后一页，如果不是就继续获取）

问题2 渲染卡

因为去分段获取，但是要动态添加到表格数据中，如果数据多，还是会卡顿，这时候就要用到懒加载（前端滚动分页）,我用的是vue，viewUI table组件。【这部分代码转载：https://juejin.cn/post/7070333443376168997】

代码：

一、创建一个 vue 自定义指令， 去监听table是否滚动到最底下。

// loadmode.js

export default {
    bind(el, binding) {
        // 获取iview-ui定义好的scroll盒子
        const selectWrap = el.querySelector('.ivu-table-body')
        selectWrap.addEventListener('scroll', function () {
            /*
             * scrollHeight 元素标签内容高度
             * scrollTop 获取元素滚动的偏移值,
             * clientHeight 元素标签的可见高度
             * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
             * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
             */
            let sign = 100
            const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
            if (scrollDistance <= sign) {
                binding.value()
            }
        })
    }
}

// plugins.js

//view-table加载更多
import loadmore from '@/plugins/loadmore';

export default {
    async install (Vue, options) {
        // 指令
        Vue.directive('loadmore', loadmore);
    }    
}

// main.js
// 插件
import plugins from '@/plugins';
Vue.use(plugins);

二、去界面中使用这个自定义指令，完成懒加载需求(因为项目涉密，所以不是实际项目代码，不过用法一致)

// template  [注意，表格要给一个高度，要有下拉框才行]
<i-table
					v-loadmore="loadMoreTableData"
					:columns="columns"
					:data="tableDataList"
					width="900"
					height="500"
				>
				</i-table>

//methods
			loadMoreTableData() {
						this.tablePageIndex++;
						if (this.tablePageIndex > Math.ceil(this.tablePageCount / this.tablePageSize)) {
							return false;
						}
						this.getTableData(this.tablePageIndex);
					},

					/**
					 * @tablePageIndex 当前页
					 * @tablePageCount 总数
					 * @tablePageSize 每页显示页数
					 * @list 通过接口获取到表格数据
					 * @tableDataList 计算后要展示的表格数据
					 */
					getTableData(tablePageIndex) {
						this.tablePageCount = this.list.length;
						if (this.tablePageCount <= this.tablePageSize) {
							tableDataList = this.list;
						} else {
							let pageIndexs = Math.ceil(this.tablePageCount / this.tablePageSize);
							console.log("pageIndexs", pageIndexs);
							if (tablePageIndex > pageIndexs) {
								tablePageIndex = pageIndexs;
							}
							let start = (tablePageIndex - 1) * this.tablePageSize;
							let end = tablePageIndex * this.tablePageSize;
							this.tableDataList = this.tableDataList.concat(
								this.list.slice(start, end)
							);
						}
					},

这样子就完成了，table显示大量数据的卡顿的问题。