PC分页操作以及loading效果

page-size 每页显示条目个数
current-page 当前页数
total 数据总数
current-change【currentPage 改变时会触发】
切换分页时会先加载,等在接口数据,接口返回,加载会关闭(在获取接口数据完毕哪里加上this.loading=false),前提是在数据哪里绑定 v-loading=“loading”
例如: <el-table :data="list" border style="width: 100%" v-loading="loading"></el-table>

 <el-paginationbackgroundlayout="prev, pager, next"align="right"style="padding: 10px":page-size="pageParams.pagesize":current-page="pageParams.page":total="pageParams.total"@current-change="changePage"></el-pagination>
<script>
import { getRoleList } from "@/api/role.js";
export default {name: "Role",data() {return {loading: false,pageParams: {pagesize: 5, //每页多少条page: 1, //当前页码数total: 0,},};},created() {this.getRoleList();},methods: {async getRoleList() {//先解构了rows,再解构了total //await getRoleList(this.pageParams); 把const { rows, total } = await getRoleList(this.pageParams);this.list = rows;this.pageParams.total = total;},//点击时触发,使页码变化changePage(newPage) {this.loading = true;//变化了页码,把最新的数据赋值给  this.pageParams.page this.pageParams.page = newPage;//在页码发生变化之后,再发一次请求,更新数据this.getRoleList();},},
};
</script>

在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

低权限(无权限)时如何在mysql客户端控制台的大量输出中快速定位mysql死锁或慢sql

查看mysql的查看死锁的方式很多&#xff0c;但很多时候我们普通开发者的权限比较低&#xff0c;无法执行某命令。比如本次就准备使用 SHOW ENGINE INNODB STATUS;命令&#xff0c;但客户端提示权限不够。后来本人找到了另一条低权限的命令 show full PROCESSLIST;但是show fu…

比例减压阀放大器选型

控制阀型如比例插装阀、比例方向阀、比例压力阀、比例流量阀、比例叠加阀等&#xff0c;安装方式有插式及导轨卡槽式&#xff0c;输入指令可选0-10V、4-20mA、10V、0-5V&#xff0c;输出电流可选最大3A&#xff0c;适用各大品牌不带电反馈常规比例阀匹配度&#xff0c;控制比例…

1553. 吃掉 N 个橘子的最少天数(记忆化+贪心优化)

Problem: 1553. 吃掉 N 个橘子的最少天数 文章目录 题目思路Code 题目 使得 n 变成0的操作有三种方式 &#xff1a; 吃掉一个橘子。如果剩余橘子数 n 能被 2 整除&#xff0c;那么你可以吃掉 n/2 个橘子。如果剩余橘子数 n 能被 3 整除&#xff0c;那么你可以吃掉 2*(n/3) 个…

易点易动设备管理系统提升设备能耗管理和设备状态监控效率

如今&#xff0c;能源效率和设备状态监控对于企业来说变得越发重要。传统的设备管理方式往往存在能耗浪费和难以实时监控设备状态的问题。为了解决这些问题&#xff0c;易点易动设备管理系统应运而生。本文将介绍易点易动设备管理系统的功能和优势&#xff0c;以及如何通过它提…

Oracle数据库安装踩坑记录

Oracle数据库安装踩坑记录 踩坑目录 可能会用到的教程1. 管理员用户&#xff08;sys&#xff09;登录oracle命令2. 默认密码&#xff1a;三个 如果忘记改密码参考 1. 登录后修改密码3. 查看账号密码&#xff1a;只有sys用户登录后才能查看4. sqldeveloper 连接oracle数据库5. o…

简墨的进化之路:打造大模型数据计算系统的云存储底座

10月24日程序员节&#xff0c;「大模型数据计算系统」2023拓数派年度技术论坛在上海圆满落幕&#xff0c;拓数派大模型数据计算系统&#xff08;PieDataComputingSystem&#xff0c;缩写&#xff1a;πDataCS&#xff09;如约而至&#xff01;πDataCS 以云原生技术重构数据存储…

论文浅尝 | 用于文档级事件关系抽取的稀疏事件表示的判别推理

笔记整理&#xff1a;邹铭辉&#xff0c;天津大学硕士&#xff0c;研究方向为自然语言处理 链接&#xff1a;https://aclanthology.org/2023.acl-long.897 动机 文档级事件关系抽取&#xff08;Document-level Event-Event Relation Extraction&#xff0c;简称DERE&#xff09…

【TypeScrpt算法】算法的复杂度分析

算法的复杂度分析 什么是算法复杂度&#xff1f; 不同的算法&#xff0c;其实效率是不一样的 让我举一个案例来比较两种不同的算法在查找数组中给定元素的时间复杂度 [1,2,3,4,5,6,7,...9999,n] 顺序查找 这种方法从头到尾遍历整个数组&#xff0c;依次比较每个元素和给定元…

SAP-查看业务变更记录

一、通过事务码查询修改记录 1、输入TCODE&#xff1a;AUT10&#xff0c;输入时间和事务处理代码&#xff0c;全部搜索输入*。 2、点击刷新&#xff0c;对已输入的条件进行重置。 3、在左侧下菜单&#xff0c;选择要查询的事务记录&#xff0c;双击&#xff0c;会带入“事务处…

【nlp】3.2 Transformer论文复现:1. 输入部分(文本嵌入层和位置编码器)

Transformer论文复现:输入部分(文本嵌入层和位置编码器) 1 输入复现1.1 文本嵌入层1.1.1 文本嵌入层的作用1.1.2 文本嵌入层的代码实现1.1.3 文本嵌入层中的注意事项1.2 位置编码器1.2.1 位置编码器的作用1.2.2 位置编码器的代码实现1.2.3 位置编码器中的注意事项1 输入复现…

探索结构体的奥秘

目录 &#x1f342;结构体 1&#xff0c;结构体的声明 1.1 结构的基础知识 1.2 结构的声明 1.3 特殊的声明 1.4 结构的自引用 1.5 结构体变量的定义和初始化 1.6 结构体内存对齐 1.6.1 如何计算 1.6.2 为什么存在内存对齐 1.7 修改默认对齐数 1.8 结构体传参 2&am…

3.7寸墨水屏蓝牙卡证

超薄机身&#xff0c;厚度不足一厘米&#xff0c;轻松佩戴无负重感。 无需基站&#xff0c;服务器&#xff0c;手机APP直接更新~ 独创快速扫描技术&#xff0c;智能感应标签 超长待机&#xff0c;超低功耗&#xff0c;Type C接口充电&#xff0c;一次充电可续航一年&#xf…

极智开发 | 随机初始化onnx模型权重的方法

欢迎关注我的公众号 [极智视界],获取我的更多经验分享 大家好,我是极智视界,本文分享一下 随机初始化onnx模型权重的方法。 邀您加入我的知识星球「极智视界」,星球内有超多好玩的项目实战源码和资源下载,链接:https://t.zsxq.com/0aiNxERDq onnx 模型一直是在算法部署中…

增量有余、后劲不足,星途汽车10月份销量环比下降3.9%

撰稿|行星 来源|贝多财经 近日&#xff0c;奇瑞集团发布了10月销量月报。报告显示&#xff0c;奇瑞集团于2023年10月销售汽车20.03万辆&#xff0c;同比增长50.8%&#xff0c;单月销量首次突破20万辆&#xff1b;2023年前10个月的累计销量为145.36辆&#xff0c;同比增长41.6…

C语言运算符详解

详细介绍了C语言表达式、算术运算符、赋值运算符、关系运算符、条件结构、逻辑运算符、位运算符的语法和使用方法&#xff0c;并讨论了运算符的优先级。 1、表达式与算术运算符 在C语言中&#xff0c;表达式是一个类似数学中的算式&#xff0c;表达式由变量、字面值、常量、运…

【坑】JDK21虚拟线程不支持run方法

【坑】JDK21虚拟线程不支持run方法 run // do nothing java.lang.VirtualThread Overridepublic void start() {start(ThreadContainers.root());}Overridepublic void run() {// do nothing}

2023年,人工智能在医疗行业领域的应用场景

本期行业洞察将带领大家了解人工智能在医疗行业领域的应用&#xff0c;主要了解在患者治疗和运营中的应用、人工智能作为预防工具以及大型医院目前如何使用人工智能。未来的智慧医疗时代已经悄然到来。 人工智能在患者治疗和机构运营中的应用 人工智能有望彻底改变医疗护理的…

csapp archlab part 1

part A [rootedb3963640a6 misc]#./yas sum.ys [rootedb3963640a6 misc]# ./yis sum.yo./yas 和 ./yis 是汇编语言编译器和模拟器的命令行工具。 ./yas 是一个汇编语言编译器&#xff0c;它将汇编语言代码转换为可执行的二进制文件。./yas sum.ys 将sum.ys文件编译成了sum.yo可…

计算机毕业设计项目选题推荐(免费领源码)Java+ssm+MYSQL酒店大数据资源管理系统的设计与实现02029

摘要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对酒店大数据资源管理系统等问题&#xff0c;对…