Vue3+ElementPlus纯前端分页（手撕分页），无需修改后端

前提：先把pagination安装上先

1、在script中加上

// 实现分页
const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = computed(() => tableData.value.length);
const paginatedData = computed(() => {const start = (currentPage.value - 1) * pageSize.value;const end = start + pageSize.value;return tableData.value.slice(start, end);
});const handleCurrentChange = (newPage) => {currentPage.value = newPage;
};const handleSizeChange = (newSize) => {pageSize.value = newSize;
};

2.如果有查询的，调用查询后重置页码

currentPage.value = 1; // 重置页码

3.<el-table>中的数据由原本的tableData更换为分页处理后的:paginatedData

4.紧接着<el-table>标签下面加上el-pagination

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total="totalItems"></el-pagination>

修改前和修改后对比

修改前：

<template><el-card class="box-card"><el-row><el-col :span="5"><el-input v-model="searchVal" placeholder="请输入需要查询内容" @change="Search" /></el-col><el-col :span="12"><el-button :disabled="!Sagency" type="primary" @click="Search">查询</el-button><el-button :disabled="!Iagency" @click="open" type="primary">新增</el-button><el-button type="primary" @click="handleExport">导出Excel</el-button></el-col></el-row><br><el-row><el-col><el-table :data="tableData" style="width: 100%;height: 65vh;" border ref="tb"><el-table-column type="selection" width="55" /><el-table-column prop="Ano" label="编号" width="150" /><el-table-column prop="Aname" label="姓名" width="150" /><el-table-column prop="Asex" label="性别" width="150" /><el-table-column prop="Aphone" label="电话" width="150" /><el-table-column prop="Aremark" label="备注" width="190" /><el-table-column label="操作" align="center"><template #default="scope"><!-- 将这一行的数据都传出去 --><el-button :disabled="!Fagency" size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button><el-button :disabled="!Dagency" size="small" type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table><!-- <el-pagination style="margin-top: 10px;" background layout="prev, pager, next" :total="total" /> --><!-- <el-pagination style="margin-top: 10px;" background layout="prev, pager, next" :total="pageSize"@current-change="handlePageChange" /> --><el-pagination style="margin-top: 10px;" background layout="prev, pager, next" :total="total":current-page="parms.PageIndex" :page-size="pageSize" @current-change="handlePageChange" /></el-col></el-row><add :isShow="isShow" :info="info" @closeAdd="closeAdd" @success="success"></add></el-card>
</template>
<script lang="ts" setup>
import { ElMessage, ElTable } from 'element-plus';
import { onMounted, Ref, ref, toRefs } from 'vue';
import Agency from '../../../class/Agency';
import { delAgency, getAgency } from '../../../http';
import add from './add.vue';
import useStore from '../../../store';
import { exportToExcel } from '../../../tool/report'const store = useStore()
const total = ref(10)
const parms = ref({Id: 0,Ano: "",Aname: "",Asex: "",Aphone: "",Aremark: "",PageIndex: 2,PageSize: 10
})// -------------------- 载入数据 --------------------
const tableData: Ref<Array<Agency>> = ref<Array<Agency>>([])
const load = async () => {console.log("load中：" + parms.value.Aname)let res = await getAgency(parms.value) as any// console.log("查询结果：" + res as Array<Agency>)tableData.value = res as Array<Agency>
}
// 查询
const searchVal = ref("")
const Search = async () => {parms.value.Aname = searchVal.value// console.log("parms.value.Aname:" + parms.value.Aname)await load()
}onMounted(async () => {await load()
})// -------------------- 新增、修改、删除逻辑 Start --------------------
const isShow = ref(false)
const open = () => {isShow.value = true
}
const closeAdd = () => {isShow.value = falseinfo.value = new Agency()
}
const info: Ref<Agency> = ref<Agency>(new Agency());    //响应式对象
const handleEdit = (index: number, row: Agency) => {info.value = rowindex ++isShow.value = true
}
const success = async (message: string) => {isShow.value = falseinfo.value = new Agency()ElMessage.success(message)await load()
}
const handleDelete = async (index: number, row: Agency) => {await delAgency(row.Id)index ++await load()
}const tb = ref<InstanceType<typeof ElTable>>()// -------------------- 设置分页 ----------------------
const pageSize = ref(10); // Number of records to display per page// Handle page change
const handlePageChange = async (page: number) => {// parms.PageIndex = page;page ++;// page = 10;await load();
};const { Permission } = toRefs(store);
const Dagency = ref(Permission.value.Dagency);
const Fagency = ref(Permission.value.Fagency);
const Iagency = ref(Permission.value.Iagency);
const Sagency = ref(Permission.value.Sagency);// Excel
const handleExport = () => {const columnHeaders = ['经办人编号', '姓名', '性别', '电话', '备注'];exportToExcel(tableData.value, '经办人信息', columnHeaders);
};</script>

修改后：

<template><el-card class="box-card"><el-row><el-col :span="5"><el-input v-model="searchVal" placeholder="请输入需要查询内容" @change="Search" /></el-col><el-col :span="12"><el-button :disabled="!Sagency" type="primary" @click="Search">查询</el-button><el-button :disabled="!Iagency" @click="open" type="primary">新增</el-button><el-button type="primary" @click="handleExport">导出Excel</el-button></el-col></el-row><br><el-row><el-col><el-table :data="paginatedData" style="width: 100%;height: 65vh;" border ref="tb"><el-table-column type="selection" width="55" /><el-table-column prop="Ano" label="编号" width="150" /><el-table-column prop="Aname" label="姓名" width="150" /><el-table-column prop="Asex" label="性别" width="150" /><el-table-column prop="Aphone" label="电话" width="150" /><el-table-column prop="Aremark" label="备注" width="190" /><el-table-column label="操作" align="center"><template #default="scope"><!-- 将这一行的数据都传出去 --><el-button :disabled="!Fagency" size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button><el-button :disabled="!Dagency" size="small" type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total="totalItems"></el-pagination></el-col></el-row><add :isShow="isShow" :info="info" @closeAdd="closeAdd" @success="success"></add></el-card>
</template>
<script lang="ts" setup>
import { ElMessage, ElTable } from 'element-plus';
import { onMounted, Ref, ref, toRefs } from 'vue';
import Agency from '../../../class/Agency';
import { delAgency, getAgency } from '../../../http';
import add from './add.vue';
import useStore from '../../../store';
import { exportToExcel } from '../../../tool/report'
import { computed } from 'vue';
const store = useStore()
const total = ref(10)
const parms = ref({Id: 0,Ano: "",Aname: "",Asex: "",Aphone: "",Aremark: "",PageIndex: 2,PageSize: 10
})// -------------------- 载入数据 --------------------
const tableData: Ref<Array<Agency>> = ref<Array<Agency>>([])
const load = async () => {console.log("load中：" + parms.value.Aname)let res = await getAgency(parms.value) as any// console.log("查询结果：" + res as Array<Agency>)tableData.value = res as Array<Agency>
}
// 查询
const searchVal = ref("")
const Search = async () => {parms.value.Aname = searchVal.value// console.log("parms.value.Aname:" + parms.value.Aname)await load()currentPage.value = 1; // 重置页码
}onMounted(async () => {await load()
})// -------------------- 新增、修改、删除逻辑 Start --------------------
const isShow = ref(false)
const open = () => {isShow.value = true
}
const closeAdd = () => {isShow.value = falseinfo.value = new Agency()
}
const info: Ref<Agency> = ref<Agency>(new Agency());    //响应式对象
const handleEdit = (index: number, row: Agency) => {info.value = rowindex ++isShow.value = true
}
const success = async (message: string) => {isShow.value = falseinfo.value = new Agency()ElMessage.success(message)await load()
}
const handleDelete = async (index: number, row: Agency) => {await delAgency(row.Id)index ++await load()
}const tb = ref<InstanceType<typeof ElTable>>()const { Permission } = toRefs(store);
const Dagency = ref(Permission.value.Dagency);
const Fagency = ref(Permission.value.Fagency);
const Iagency = ref(Permission.value.Iagency);
const Sagency = ref(Permission.value.Sagency);// Excel
const handleExport = () => {const columnHeaders = ['编号', '姓名', '性别', '电话', '备注'];exportToExcel(tableData.value, '经办人信息', columnHeaders);
};// 实现分页
const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = computed(() => tableData.value.length);
const paginatedData = computed(() => {const start = (currentPage.value - 1) * pageSize.value;const end = start + pageSize.value;return tableData.value.slice(start, end);
});const handleCurrentChange = (newPage) => {currentPage.value = newPage;
};const handleSizeChange = (newSize) => {pageSize.value = newSize;
};</script>