vue+element 后台无分页时，数据量太大直接渲染会导致变慢或卡顿，此时前端可根据业务场景进行滚动加载或者分页，来减轻渲染的压力

【template】

<div class="content" @scroll="loadMore($event)">
  <ul v-if="dataTotal.length>=1">
	<li v-for="item in dataShow">
	  {{item.code}}
	</li>
  </ul>
  <span v-else class="c-888 dis-inline-block p-t-5">暂无数据</span>
</div>

【data】

dataTotal:[],
dataShow:[],

【methods】

// 后台数据
async getData(){
  const {data,code,message}=await api({})
  if(code===0){
	this.dataTotal=[];
	this.dataShow=[];
	if(data.length>50){
	  this.dataTotal=data;
	  this.dataShow=data.slice(0,50);
	}
  }
},
// 滚动加载
loadMore(e) {
  let self=this
  const h = e.target,
	clientHeight = h.clientHeight,
	scrollTop = h.scrollTop,
	scrollHeight = h.scrollHeight
  let tableNum = self.dataShow.length;
  if(clientHeight+scrollTop>=scrollHeight){
	let li_size = self.dataTotal.slice(tableNum, tableNum + 50);
	li_size.map(item => {
	  self.dataShow.push(item);
	});
	if (li_size.length === 0) {
	  this.$message.warning('已经到底啦')
	}
  }
},