vue实现分页操作

后端返回的数据量大，没有转换成页码返回时，可以用slice()方法实现分页操作

HTML部分：

<el-table :data="tableData" size="small"></el-table>

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="CurrentPage"
  :page-sizes="[20, 40, 60, 80, 100]"
  :page-size="PageSize"
  layout="total, jumper , prev, pager, next, sizes"
  :total="Total"
>
</el-pagination>```

JS部分

import {defineComponent,reactive,toRefs,onMounted} from "vue";
export default defineComponent({
setup() {
	const state = reactive<any>({
		CurrentPage: 1,
		PageSize: 20,
		Total: 0,
		tableData:[],//table最终展示的数据
		TotalList:[],//存储数据
	})

	onMounted(() =>{
		getTableData()
	})

	//获取table数据
	function getTableData(){
		api(params).then(res => {
			if(res.status == '1000'){
				state.TotalList = res.data;
				state.Total = res.data.length;
				state.CurrentPage = 1;
				if (res.data.length > 20) {
					state.tableData= state.TotalList.slice(0, state.PageSize);
				else {
					state.tableData= res.data;
				}
			}
		})
	}

	function handleSizeChange(val: any) {
  		state.PageSize = val;
  		state.CurrentPage = 1;
  		const end = state.CurrentPage * val;
  		const data = state.TotalList.slice(state.TotalList.length > val ? end - val : 0, end);
  		state.tableData = data;
	}

	function handleCurrentChange(val: any) {
  		state.CurrentPage = Math.ceil(val);
 		const end = Math.ceil(val) * state.PageSize;
  		const data = state.TotalList.slice(end - state.PageSize, end);
  		state.tableData = data;
	}

	return {
      	...toRefs(state),
      	handlehSizeChange,
      	handlehCurrentChange,
    	};
 	 },
});