前端代替后端做分页操作

复制代码
如果后端没有分页api,前端如何做分页

一、使用computed

复制代码
这个变量应该是计算之后的值,是一个状态管理变量,跟onMounted类似
ts 复制代码
import {computed} from 'vue'
// 定义ref储存rolelist,这里是原始数据
const roleList = ref([])

// 定义页码
let pageIndex = ref(1)
// 定义显示的列表
let showRoles = computed(() => {
	// 切片操作
	return roles.value.slice((pageIndex.value-1) * 10, pageIndex)
})

// 查询数据操作,自己写
复制代码
将showRoles替换绑定表格数据,我这里是组件,是父传子定义的一个变量tableData,如果你这里插入的是一个表格,那么应该是:Data="showRoles"
html 复制代码
	<PublicTables :tableData="showRoles" @multipleSelection="handleSelection">

                <!-- <template #selection ></template> -->

                <template #tableColumn>

                    <el-table-column property="roleId" label="角色ID" />

                    <el-table-column property="roleName" label="角色名" />

                </template>

                <template #operation>

                    <el-table-column label="操作">

                        <template #default="scope">

                            <el-button size="small" @click="handleEdit(scope.row)">

                                编辑

                            </el-button>

                            <el-button size="small" type="danger" @click="handleDelete(scope.row)">

                                删除

                            </el-button>

                        </template>

                    </el-table-column>

                </template>

            </PublicTables>

二、添加分页器

复制代码
template中添加分页器
html 复制代码
	<el-pagination size="small" background layout=" prev, pager, next, total" :total="roleList.length" :current-page="pageIndex" />
复制代码
这里current-page绑定绑定的页码会保持同步,分页器总页数就是roleList的长度。
到这里应该已经实现了前端分页功能
相关推荐
Mintopia9 分钟前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙9 分钟前
JS设计模式指南
前端·javascript
拳打南山敬老院12 分钟前
漫谈 MCP 构建之Resources篇
前端·后端·ai编程
golang学习记14 分钟前
从0死磕全栈第九天:Trae AI IDE一把梭,使用react-query快速打通前后端接口调试
前端
超人92115 分钟前
我用纯前端技术打造了一个开发者工具箱,10+实用工具助力提效!
前端
bug_kada16 分钟前
详解 React useCallback & useMemo
前端·react.js
Mintopia16 分钟前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
AAA_Tj17 分钟前
前端动画技术全景指南:四大动画技术介绍
前端
断竿散人22 分钟前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
进阶的鱼23 分钟前
(4种场景)单行、多行文本超出省略号隐藏
前端·css·面试