vue+element-ui实现前端分页

<el-pagination
    v-model:currentPage="currentPage4"
	v-model:page-size="pageSize4"
	:page-sizes="[10, 20, 30, 50]"
	:small="false"
	:disabled="false"
	background
	layout="total, sizes, prev, pager, next, jumper"
	:total="total"
	@size-change="handleSizeChange"
	@current-change="handleCurrentChange"
/>


// 前端分页
const currentPage4 = ref(1); //默认第一页
const pageSize4 = ref(10); //默认一页几条数据
// 总数据
const total = ref(0);

//点击每页多少条数据时改变
const handleSizeChange = (p) => {
	pageSize4.value = p;
    currentPage4.value = 1;
    tableData1.value = JSON.parse(JSON.stringify(tableData.value)).slice(
        (currentPage4.value-1)*pageSize4.value,currentPage4.value*pageSize4.value
      );;
};

//点击页码时改变
const handleCurrentChange = (p) => {
	currentPage4.value = p;
    tableData1.value = JSON.parse(JSON.stringify(tableData.value)).slice(
        (currentPage4.value-1)*pageSize4.value,currentPage4.value*pageSize4.value
    );
};

第二种方法：

// 前端分页
const currentPage4 = ref(1);
const pageSize4 = ref(10);
// 总数据
const total = ref(0);
const handleSizeChange = (p) => {
	pageSize4.value = p;
    currentPage4.value = 1;
    const end = currentPage4.value * p;
    const data = JSON.parse(JSON.stringify(tableData.value)).slice(
        tableData.value.length > p ? end - p : 0,
        end
      );
      tableData1.value = data;
};
const handleCurrentChange = (p) => {
    console.log(JSON.parse(JSON.stringify(tableData.value)),'pppp');
	currentPage4.value = Math.ceil(p);
    const end = Math.ceil(p) * pageSize4.value;
    const data = JSON.parse(JSON.stringify(tableData.value)).slice(end - pageSize4.value, end);
    tableData1.value = data;
};