veu3的分页大多基于组件,所以今天不整手写的整组建板的;
数据为接口返回的数据
首先获取数据并赋值给变量
function fun() {
axios({
url: '', // url
params: {},
})
.then((res) => {
console.log(res);
for (let i = 0; i < res.data.data.length; i++) {
gid_data.value.push(res.data.data[i]);
}
tableData.value = res.data.data;
tableData.value.sort(function (a, b) {
return a.id - b.id;
});
// 分页
tableData.value = [...res.data.data];
total.value = res.data.data.length;
})
.catch(function (err) {});
}
fun();
设置变量进行分页处理
const limit = ref(10); // 每页数据
const page = ref(1); // 默认页数
const total = ref(0); // 总的数据
在HTML中对数据接收并处理
<!-- 列表 -->
<el-table
:data="tableData.slice((page - 1) * limit, page * limit)"
height="500px"
style="width: 98%; user-select: none"
>
<el-table-column prop="id" label="id" />
<el-table-column prop="" label="轮播图片" style="display: flex; justify-content: center">
<template #default="scope">
<el-image :src="scope.row.imgs" style="width: 40px; height: 40px" />
</template>
</el-table-column>
<el-table-column prop="name" label="轮播名称" />
<el-table-column prop="gid" label="商品id" />
<el-table-column prop="gname" label="商品名称" />
<el-table-column prop="" label="操作"
><template #default="scope">
<span style="color: #53ac6f" @click="bian(scope.row, scope.row.imgs)">编辑</span>
<span style="color: red; margin-left: 10%" @click="dele(scope.row.id)">删除</span>
</template>
</el-table-column>
</el-table>
最后是页数处理
<div class="paging" style="margin-left: 2%">
<el-pagination
:current-page="page"
background
layout="total, sizes, prev, pager, next, jumper"
:total="total"
class="mt-4"
v-model:page-size="limit"
:page-sizes="[10, 15, 20]"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>