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;

};
相关推荐
恋猫de小郭26 分钟前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
大怪v44 分钟前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
我是天龙_绍1 小时前
vue3 props 如何写ts,进行类型标注
前端
叫我詹躲躲1 小时前
n8n 自动化工作流平台完整部署
前端·langchain·领域驱动设计
遂心_3 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒3 小时前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
王同学QaQ3 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
岛风风3 小时前
关于手机的设备信息
前端
ReturnTrue8683 小时前
nginx性能优化之Gzip
前端
华仔啊3 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端