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.中的数据由原本的tableData更换为分页处理后的:paginatedData

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

修改前和修改后对比

修改前：

修改后：