element plus el-table 简单分页组件

分页组件定义

PaginationTable.vue

<template><!-- 外部可以自定义列 --><slot></slot><el-pagination @change="props.handleChangePage" layout="prev, pager, next" :page-size=" props.data.size?? 10" :total="props.data.total?? 0" />
</template><script setup>import { ref, watchEffect } from 'vue';
const props = defineProps({data: Object, // 分页参数handleChangePage: Function, // 页码点击处理函数
})console.log({...props.data})
</script><style></style>

使用

role.vue

<template><PageNationTable :handleChangePage="handleChangePage" :data="pageData"><!-- normal element table here --><el-table :data="tableData" style="width: 100%;" height="100%"><el-table-column prop="id" label="id" width="120" /><el-table-column prop="roleName" label="角色名" width="120" /><el-table-column prop="roleDescription" label="描述" width="120" /><el-table-column prop="createTime" label="创建时间" width="200" /><el-table-column prop="updateTime" label="更新时间" width="200" /></el-table></PageNationTable>
</template><script setup>
import PageNationTable from '../components/PageNationTable.vue';
import { reactive, ref } from 'vue'
import http from '../../http'
// fetch data -> get data and page info -> ref([])
//                      ->  show in table 
//                      -> pass to this compoment to show pagination
const tableData = ref([
])// 定义分页参数
const pageData = reactive({page: 1,size: 2,total: 0
});
// 页码点击事件
function handleChangePage(e) {pageData.page = efetchRoles()
}
// 页面数据查询接口
fetchRoles()async function fetchRoles() {const res = await http.get('/api/role/list?' +  new URLSearchParams({pageNum: pageData.page, pageSize: pageData.size}))const { list, page, total } = res.data;pageData.page = pagepageData.total = totaltableData.value = list
}</script><style></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/20153.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

PyCharm的类型警告: Expected type ‘SupportsWrite[bytes]‘, got ‘BinaryIO‘ instead

记录时使用的PyCharm版本: PyCharm 2024.3 (Professional Edition) Build #PY-243.21565.199, built on November 13, 2024 问题描述 当在PyCharm里使用pickle保存文件, 比如以下代码这样: with open(meta_save_path, wb) as f:pickle.dump(meta, f)会发现PyCharm对此发出类型…

【Docker】快速部署 Pikachu:一个包含常见 Web 安全漏洞的渗透测试练习靶场

系统介绍 Pikachu是一个带有漏洞的Web应用系统&#xff0c;在这里包含了常见的web安全漏洞。 如果你是一个Web渗透测试学习人员且正发愁没有合适的靶场进行练习&#xff0c;那么Pikachu可能正合你意。 Pikachu上的漏洞类型列表如下&#xff1a; Burt Force(暴力破解漏洞) XSS…

vscode 执行 vue 命令无效/禁止运行

在cmd使用命令可以创建vue项目但是在vscode上面使用命令却不行 一、问题描述 在 cmd 中已确认vue、node、npm命令可以识别运行&#xff0c;但是在 vscode 编辑器中 vue 命令被禁止&#xff0c;详细报错为&#xff1a;vue : 无法加载文件 D:\Software\nodejs\node_global\vue.…

【电路笔记 通信】:数字式时分制指令响应型多路传输数据总线 1553协议 289A-97协议

系统及组成 MIL-STD-1553是一种用于航空、航天和军用系统中的多路传输数据总线标准。最初由美国国防部在1973年制定&#xff0c;该标准旨在为军用飞机、导弹和其他嵌入式系统提供可靠的数据通信&#xff0c;现已被广泛应用于航空航天、卫星、舰船、地面车辆以及其他关键任务系统…

npm/cnpm的使用

npm 1、安装npm 前往nodejs官网下载安装node 验证是否安装成功node node -v node安装npm也会安装 npm -v 2、使用npm 1. 初始化项目 在一个项目文件夹中运行&#xff1a; npm init 根据提示输入项目信息&#xff08;如项目名称、版本号等&#xff09;。 如果你希望快速初…

红外相机和RGB相机外参标定 - 无需标定板方案

1. 动机 在之前的文章中红外相机和RGB相机标定&#xff1a;实现两种模态数据融合_红外相机标定-CSDN博客 &#xff0c;介绍了如何利用标定板实现外参标定&#xff1b;但实测下来发现2个问题&#xff1a; &#xff08;1&#xff09;红外标定板尺寸问题&#xff0c;由于标定板小…

web小:在html页面实现多边形按钮

效果如下图所示 主要是使用了clip-path&#xff0c;代码如下 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">&l…

【蓝桥杯C/C++】翻转游戏:多种实现与解法解析

文章目录 &#x1f4af;题目&#x1f4af;问题分析解法一&#xff1a;减法法解法二&#xff1a;位运算解法解法三&#xff1a;逻辑非解法解法四&#xff1a;条件运算符解法解法五&#xff1a;数组映射法不同解法的比较 &#x1f4af;小结 &#x1f4af;题目 在蓝桥镇&#xff0…

V-rep机器人仿真软件学习笔记

常用的机器人仿真软件有哪些&#xff1f;为什么选择V-rep&#xff1f; 目前常用的机器人物理仿真软件有Gazebo、V-rep、Webots等&#xff0c;这三款都是开源软件&#xff0c;自己使用过前两种&#xff0c;Gazebo配合ROS使用功能十分强大&#xff0c;但是要在Linux系统下使用&am…

第7章 硬件测试-7.1 硬件调试

第7章 硬件测试 7.1 硬件调试7.1.1 电路检查7.1.2 电源调试7.1.3 时钟调试7.1.4 主芯片及外围小系统调试7.1.5 存储器件和串口外设调试7.1.6 其他功能模块调试 测试是每项成功产品的必经环节。硬件测试是评估产品质量的重要方法&#xff0c;产品质量是公司的信誉和品牌象征&…

《深入理解 Spring MVC 工作流程》

一、Spring MVC 架构概述 Spring MVC 是一个基于 Java 的轻量级 Web 应用框架&#xff0c;它遵循了经典的 MVC&#xff08;Model-View-Controller&#xff09;设计模式&#xff0c;将请求、响应和业务逻辑分离&#xff0c;从而构建出灵活可维护的 Web 应用程序。 在 Spring MV…

基于Java Springboot宿舍管理系统

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据…

LeetCode螺旋矩阵

快一个月没刷题了&#xff0c;最近工作有些忙&#xff0c;今天闲下来两小时&#xff0c;刷一道 题目描述 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4…

探索CompletableFuture:高效异步编程的利器

目录 一、CompletableFuture基本功能安利 二、CompletableFuture使用介绍 &#xff08;一&#xff09;任务创建使用 1.supplyAsync创建带有返回值的异步任务 2.runAsync创建没有返回值的异步任务 &#xff08;二&#xff09;异步回调使用 1.异步回调&#xff1a;thenApp…

java的强,软,弱,虚引用介绍以及应用

写在前面 本文看下Java的强&#xff0c;软&#xff0c;弱&#xff0c;虚引用相关内容。 1&#xff1a;各种引用介绍 顶层类是java.lang.ref.Reference,注意是一个抽象类&#xff0c;而不是接口&#xff0c;其中比较重要的引用队列ReferenceQueue就在该类中定义&#xff0c;子…

基于STM32的智能垃圾分类投递系统设计

目录 引言系统需求与设计目标硬件设计 3.1 核心控制模块 3.2 传感器模块 3.3 驱动模块 3.4 显示模块 3.5 通信模块软件设计 4.1 数据采集与处理 4.2 垃圾分类逻辑实现 4.3 状态显示与远程监控代码实现 5.1 数据采集与处理 5.2 分类逻辑与控制 5.3 状态显示与通信 5.4 主程序实…

手摸手6-创建前端应用

目录 手摸手6-创建前端应用简介命令 npm create vue 和 npm init vue3的区别 使用 Create-Vue 创建应用1、输入命令 npm create vue 创建应用2、输入命令 npm install 安装相关依赖3、输入命令 npm run dev 运行项目 项目结构 手摸手6-创建前端应用 简介 create-vue 是 vue 应…

第T8周:Tensorflow实现猫狗识别(1)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 具体实现 &#xff08;一&#xff09;环境 语言环境&#xff1a;Python 3.10 编 译 器: PyCharm 框 架: &#xff08;二&#xff09;具体步骤 from absl.l…

【MySQL】数据库基础

1.数据库基本认识 广义上来说数据库是长期存储在磁盘上的数据文件的集合&#xff0c;而MySQL是采用了C/S模式实现的一个网络服务&#xff0c;它由MySQL&#xff08;数据库客户端&#xff09; 、MySQLD &#xff08;数据库服务&#xff09;、磁盘上的数据库文件组成。MySQL服务是…

AWS IAM

一、介绍 1、简介 AWS Identity and Access Management (IAM) 是 Amazon Web Services 提供的一项服务&#xff0c;用于管理 AWS 资源的访问权限。通过 IAM&#xff0c;可以安全地控制用户、组和角色对 AWS 服务和资源的访问权限。IAM 是 AWS 安全模型的核心组成部分&#xf…