使用上下拉条渲染部分数据方法，解决表格有大量数据又需要显示在一页进行批量操作时的卡顿问题

实习笔记

大量数据批量处理时，显示加载百分比
取消axios请求

---

前言

这个渲染部分数据方法是在做了分页之后，还需要几千行在一页展示出来，方便批量操作，但这样太卡顿，只有渲染部分数据才可以解决卡顿和批量操作的冲突

一、创建变量

目标：
对数据进行处理，将后端返回的总数据和渲染数据和提交数据分开存储
对全选和单选进行分开处理
当页码显示数<=100时，直接全部渲染，并没有到顶部底部的提醒

<template>
	<el-table
		:data="showTableData"//绑定渲染的数据
		@select-all="handleTableSelectionChange"//点击全选的事件
        @select="oneChange"//手动点击单个选项的事件
        ref="table"
		>
	</el-table>
	<el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :total="pagination.total"
        :current-page="pagination.pageNum"
        :page-size="pagination.pageSize"
        //页码可以设置为数据的总数pagination.total
        :page-sizes="[30,60,100,500,1000,2000,pagination.total]"
        layout="total,sizes,prev,pager,next" />
</template>

<script>
export default {
   
	data(){
   
		return {
   
			tableData:[],//存储全部数据
		 	showTableData:[],//存储渲染的数据
		 	tableSelect: [],//存储批量操作时提交处理的数据
	     	num:200,//设置第一次下拉需要渲染的最高范围
	     	timer:null,//决定是否执行部分渲染，并给渲染数据加节流处理，防止一直下拉，数据没加载出来，num变量已经连续更改
		}
	}
	methond:{
   
		//列表请求数据后的回调函数
		afterInit (res) {
   
	      this.tableData = res.data.records//将全部数据存储
	      this.tableSelect=[]//将提交数据置空
	      if(this.pagination.pageSize<=100)