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>
