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