vue3+ts+element 前端实现分页

	<el-table border :data="tableData[pageable.pageNum - 1]" style="width: 100%" height="250" ref="tableRef">
			<el-table-column type="selection" width="55" />
			<el-table-column type="index" label="序号" width="60" />
			<el-table-column prop="id" label="id" />
			<el-table-column prop="b" label="b" width="150" />
			<el-table-column prop="c" label="c" />
			<el-table-column label="操作" prop="operation" width="80">
				<template #default="scope">
					<el-button link type="primary" @click="deleteUser(scope.$index)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		 <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

const pageable = ref({
	pageNum: 1,
	pageSize: 25,
	total: 0
});
const userList = ref<any>([]);
for (let i = 0; i < 1005; i++) {
  if (i % 10 == 0) {
    userList.value.push({ id: i + 1, b: "sb", c: "" });
  } else {
    userList.value.push({ id: i + 1, b: "sb", c: "13321618542" });
  }
}
//总记录数等于数组的长度
total.value = userList.value.length;
const spliceArr = (list: any, length: any) => {
	let arr = Object.assign([], list);
	let index = 0;
	let newArray = [];
	while (index < arr.length) {
		newArray.push(arr.splice(index, length));
	}
	return newArray;
};

//根据pageSize切割数组成n等分
let tableData = ref(spliceArr(userList.value, pageable.value.pageSize));
const handleSizeChange = (val: number) => {
	pageable.value.pageSize = val;
	tableData.value = spliceArr(userList.value, pageable.value.pageSize);
};

//切换当前页
const handleCurrentChange = (val: number) => {
	pageable.value.pageNum = val;

};
相关推荐
Martin -Tang29 分钟前
vite和webpack的区别
前端·webpack·node.js·vite
迷途小码农零零发30 分钟前
解锁微前端的优秀库
前端
王解1 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
老码沉思录1 小时前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂2 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽5 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新6 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html