前端代替后端做分页操作

ops/2024/11/9 17:08:04/
如果后端没有分页api,前端如何做分页

一、使用computed

这个变量应该是计算之后的值,是一个状态管理变量,跟onMounted类似
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"
	<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中添加分页器
	<el-pagination size="small" background layout=" prev, pager, next, total" :total="roleList.length" :current-page="pageIndex" />
这里current-page绑定绑定的页码会保持同步,分页器总页数就是roleList的长度。
到这里应该已经实现了前端分页功能

http://www.ppmy.cn/ops/107858.html

相关文章

使用golang的AST编写定制化lint

什么是lint &#xff08;来自wiki&#xff09;在计算机科学中&#xff0c;lint是一种工具程序的名称&#xff0c;它用来标记源代码中&#xff0c;某些可疑的、不具结构性&#xff08;可能造成bug&#xff09;的段落。它是一种静态程序分析工具&#xff0c;最早适用于C语言&…

windows10-VMware17-Ubuntu-22.04-海康2K摄像头兼容问题,求解(已解决)

文章目录 1.webrtc camera测试2.ffmpeg 测试3.Ubuntu 自带相机4.解决办法 环境&#xff1a;windows10系统下&#xff0c;VMware的Ubuntu-22.04系统 问题&#xff1a;摄像头出现兼容问题&#xff0c;本来是想开发测试的&#xff0c;Ubuntu方便些。买了海康2K的USB摄像头&#xf…

第十五届蓝桥杯图形化省赛题目及解析

第十五届蓝桥杯图形化省赛题目及解析 一. 单选题 1. 运行以下程序&#xff0c;角色会说( )? A、29 B、31 C、33 D、35 正确答案&#xff1a;C 答案解析&#xff1a; 重复执行直到m>n不成立&#xff0c;即重复执行直到m<n。所有当m小于或者 等于n时&…

ICMP协议(介绍,类型),ping命令原理+注意点,traceroute原理(原始套接字)

目录 ICMP协议 引入 介绍 类型 ping命令 介绍 ​编辑 原理 注意点 traceroute 介绍 原理 原始套接字 工作过程 ICMP协议 引入 一个新搭建好的网络 , 往往需要先进行一个简单的测试 , 来验证网络是否畅通 但是IP协议并不提供可靠传输,如果丢包了, IP协议并不能…

如何提高对账的效率?

前言 每到月末财务都需要对发票的进行对账&#xff0c;来核对分公司的差旅业务是否与总公司的账单能够齐平&#xff0c;确保交易的准确性&#xff0c;接下来分享一下是如何优化这个场景的。 知识补充-对账的定义 财务对账是对企业或个人财务账目进行核对的过程&#xff0c;目…

idea一键自动化部署项目

文章目录 前言一、 IDEA插件安装1. 首先下载 Alibaba Cloud Toolkit 插件2. 插件下载完成后重启IDEA 二、SpringBoot项目准备1. pom.xml 文件2. controller3. 启动类 三、SpringBoot项目jar包部署1. Alibaba Cloud Toolkit 插件服务器配置2. 主机 IP、用户名、密码 点击测试链接…

完整指南:CNStream流处理多路并发框架适配到NVIDIA Jetson Orin (二) 源码架构流程梳理、代码编写

目录 1 视频解码代码编写----利用jetson-ffmpeg 1.1 nvstream中视频解码的代码流程框架 1.1.1 类的层次关系 1.1.2 各个类的初始化函数调用层次关系 1.1.3 各个类的process函数调用层次关系 1.2 编写视频解码代码 1.2.1 修改VideoInfo结构体定义 1.2.2 修改解封装代码 …

Excel 将行和列转置的两种方法

方法一&#xff1a; 方法二&#xff1a;使用transpose公式