iview表格组件懒加载

时间：2023-04-05 23:49:01 HTML5

场景众所周知，iview的表格组件，如果数据量很大，表格组件的渲染是很慢的。为了优化初始化表的时间，我们不得不做一些优化。因为，由于业务需求，这个数据表是主数据表，不能使用分页……所以我们只能乖乖的做前端的懒加载（也就是分页）。思路很简单，这里用了一个二维数组。定义每个二维数组要存入的数，然后维护二维数组的下标。声明一个变量：len，代表接口获取到的数组的长度。每个子数组存储的数字=>len/10一个循环要添加的次数=>len/(leng/(len/10))然后将多个子数组压入item数组。之后监听表格的滚动事件，触底后触发loadmore事件，将剩余子数组push到初始化数组；这可能就是这个想法。代码如下

加载...asyncgetRateData(){this.loading=true;constres=awaitapi.getRateList();this.loading=false;consttableData=res.data.Data||[];if(res.data.DetailedStatus===1){letresult=tableData.map(item=>{return{...item,isDisabled:true,btnLoading:false,isEdit:false}});//每个子数组存储的数量leteveryItemLength=Math.ceil(result.length/10);//一次循环要加的次数//因为获取到的值可能不是整数，所以需要向上取整，目的是保证最后一次循环不会漏掉//如果获取到的值为5.4，如果不向上取整，只会循环5次，少了这个。averageNum=Math.ceil(result.length/everyItemLength);让arr=[];让我=0;while(i{this.scrollTable=document.querySelector('.ivu-table-overflowY');this.listenScroll();},100);}elsethis.$dialog(res.data.DetailedMessage)},listenScroll(){this.$nextTick(()=>{//节流函数，不会写的找度娘const{throttle}=this.commonFunction;letself=this;constlistenTableScroll=(e)=>{clearTimeout(self.timer)if(!self.scrollTable)thrownewError('表初始化尚未完成')letscrollTop=自滚动表格.scrollTop;让clientHeight=self.scrollTable.offsetHeight;让scrollHeight=self.scrollTable.scrollHeight;如果(scrollHeight>clientHeight&&scrollTop+clientHeight===scrollHeight){console.log('bottom');//if超过可以加载的次数returnif(self.num==self.averageNum-1)return;self.spinShow=true;self.timer=setTimeout(()=>{self.spinShow=false;clearTimeout(self.timer)self.timer=null;},4000);//每一次触底，就意味着需要拼接下一组数据self.num++;//调用拼接数组的loadmore方法，将接口获取的数组和num值传给它self.loadmore(self.originArr,self.num)}}//节流监控表滚动self.scrollTable.addEventListener('scroll',throttle(listenTableScroll,400));})},handleSpinCustom(){this.$自旋。展示（{render:(h)=>{returnh('div',[h('Icon',{'class':'demo-spin-icon-load',props:{type:'ios-loading',size:18}}),h('div','加载')])}});setTimeout(()=>{this.$Spin.hide();},3000);},loadmore(list,num){//如果为0表示是第一次加载，不需要拼接数组，从第二次开始拼接if(num===0)return//让第一个加载的数组拼接到后面的数组上如果需要兼容低版本浏览器，替换成concat//num可以取出对应的二维数组值下标this.tableData=[...this.tableData,...list[num]];},originArr和tableData的最终结构，结果，这是一个比较简单的解决方案，以后会继续优化...有问题可以加QQ：602353272

上一篇：使用按钮的5个理由

下一篇：newFormData()-FormData对象的功能和用法

iview表格组件懒加载相关文章