一、前端分页
<el-pagination
v-model:page-size="pageSize"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:total="total"
background
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
setup() {
const state = reactive({
pageSize: 10,
currentPage: 1,
total: 0,
list:[],
})
function getListFun() {
api().then((res: any) => {
if (res.status == '1000') {
state.total = res.data.length;
state.list= res.data.slice((state.currentPage - 1) * state.pageSize, state.currentPage * state.pageSize);
}
})
}
function handleSizeChange(data: number) {
state.pageSize = data;
state.currentPage = 1;
getListFun();
}
function handleCurrentChange(data: number) {
state.currentPage = data;
getListFun();
}
}