这是渲染出来的数据
其实解决思路大致就是：把后台返回的上万条数据，进行分割（前端分页），这样先加载几十条，然后再用懒加载的方式去concat，完美解决
上代码
<template><div class="home-contianer"><el-tablev-loading="loading":data="tableList"ref="containerTable"borderstripev-loadmore="loadmore":height="scrollerHeight":header-cell-style="{ backgroundColor: '#E4E4E4', color: '#000000' }"><el-table-columnlabel="序号"align="center"prop="index"width="50"fixed/><el-table-columnlabel="部门"align="left"prop="deptName"width="100"fixed/><el-table-columnlabel="仓库"align="left"prop="wareName"width="200"fixed/></el-table></div>
</template><script>
export default {data() {return {dataList: [],loading: false,resourceTotal: 0,resourceNum: 1,resourcePage: 20,tableList: []};},directives: {loadmore: {bind(el, binding) {const selectWrap = el.querySelector(".el-table__body-wrapper");selectWrap.addEventListener("scroll", function() {const scrollDistance =this.scrollHeight - this.scrollTop - this.clientHeight;// 判断是否到底,scrollTop为已滚动到元素上边界的像素数，scrollHeight为元素完整的高度，clientHeight为内容的可见宽度if (scrollDistance <= 10) {binding.value();}});}}},computed: {// 滚动区高度scrollerHeight: function() {return window.innerHeight - 200 + "px"; //自定义高度需求}},created() {this.getList();},methods: {getList() {this.loading = true;for (let index = 0; index < 100000; index++) {let obj = {index: index,deptName: index + "deptName",wareName: "wareName" + index};this.dataList.push(obj);}this.tableList = this.dataList.slice(0, this.resourcePage);this.resourceTotal = this.tableList.length;this.resourceNum = 1;this.loading = false;},//懒加载loadmore() {this.resourceNum++;this.searchLoadResource();},searchLoadResource() {let result = [];if (this.resourcePage * this.resourceNum < this.dataList.length) {result = this.dataList.slice(this.resourcePage * (this.resourceNum - 1),this.resourcePage * this.resourceNum);} else {result = this.dataList.slice(this.resourcePage * (this.resourceNum - 1),this.dataList.length);}this.resourceTotal = result.length;this.tableList = this.tableList.concat(result);}}
};
</script>
<style></style>
