PC分页操作以及loading效果

news2024/9/24 17:17:36

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-pagination
        background
        layout="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.coloradmin.cn/o/1248361.html

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

相关文章

多模态——使用stable-video-diffusion将图片生成视频

多模态——使用stable-video-diffusion将图片生成视频 0. 内容简介1. 运行环境2. 模型下载3. 代码梳理3.1 修改yaml文件中的svd路径3.2 修改DeepFloyDataFiltering的vit路径3.3 修改open_clip的clip路径3.4 代码总体结构 4. 资源消耗5. 效果预览 0. 内容简介 近期&#xff0c;…

ArkTS-自定义组件学习

文章目录 创建自定义组件页面和自定义组件生命周期自定义组件和页面的区别页面生命周期(即被Entry修饰的组件)组件生命周期(即被Component修饰的组件) Builder装饰器&#xff1a;自定义构建函数按引用传递参数按值传递参数 BuilderParam装饰器&#xff1a;引用Builder函数 这个…

Leetcode刷题笔记题解(C++):1008. 前序遍历构造二叉搜索树

思路&#xff1a; 1.树中的第一个值为根&#xff08;数组的第一个值&#xff09;&#xff0c;小于根的值存放在左子树中&#xff0c;大于根的值存放在右子树中&#xff1b; 2.利用递归对左右子树 /*** Definition for a binary tree node.* struct TreeNode {* int val;*…

msvcp71.dll,msvcr71.dll丢失怎么办?教你如何快速解决此问题

msvcp71.dll是Microsoft Visual C 2003运行库中的一个组件&#xff0c;它是Microsoft Visual C 2003编译的程序在运行时所需要的动态链接库文件。它包含了许多C标准库函数的实现&#xff0c;如字符串处理、数学计算等。当程序运行时&#xff0c;如果缺少这个文件&#xff0c;就…

python实现存款日利息计算器(窗口界面形式)

输入存款金额&#xff0c;7日年化收益率&#xff0c;输出每日利息 完整源码如下&#xff1a; import tkinter as tk from tkinter import messageboxdef calculate_interest():deposit float(entry_deposit.get())interest_rate float(entry_interest_rate.get())daily_int…

初始linux:文件操作

目录 提示&#xff1a;以下指令均在Xshell 7 中进行 linux的理念 一、echo echo "字符串" 二、输出重定向 > > [文件] echo "字符串" > [文件] echo "字符串" > > [文件] 制作大文件 三、< 输入重定向与ca…

HEADER请求头都有哪些,作用是什么?

HTTP 请求头是在客户端向服务器发送 HTTP 请求时&#xff0c;包含有关请求的附加信息的部分。以下是一些常见的 HTTP 请求头及其作用&#xff1a; Accept&#xff1a; 作用&#xff1a; 客户端通知服务器可以接受哪些媒体类型&#xff08;如 text/html、application/json&…

Linux:Ubuntu实现远程登陆

1、查看sshd服务是否存在 Ubuntu默认是没有安装sshd服务的&#xff0c;所以&#xff0c;无法远程登陆。 检查22端口是否存在 netstat -anp 该命令执行后&#xff0c;查看不到22端口的进程。 如果netstat无法使用&#xff0c;我们需要安装一下netstat服务 sudo apt-get install…

【电路笔记】-分压器

分压器 文章目录 分压器1、概述2、负载分压器3、分压器网络4、无功分压器4.1 电容分压器4.2 感应分压器 5、总结 有时&#xff0c;需要精确的电压值作为参考&#xff0c;或者仅在需要较少功率的电路的特定阶段之前需要。 分压器是解决此问题的一个简单方法&#xff0c;因为它们…

001、First_blood-Hello World

之——start 目录 之——start 杂谈 正文 1.内容 2.DevEco Studio 3.运行hello world 4.微调 5.工程目录 总结 杂谈 开启学习之旅&#xff0c;记录学习点滴。应用开发基础知识&#xff0c;新版本新技术新特征&#xff0c;十分友好&#xff0c;十分期待。另外有&#…

UML建模图文详解教程07——活动图

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl本文参考资料&#xff1a;《UML面向对象分析、建模与设计&#xff08;第2版&#xff09;》吕云翔&#xff0c;赵天宇 著 活动图概述 活动图(activity diagram)是 UML中一种重…

文件夹重命名:彻底摆脱数字困扰,批量修改文件夹名去除数字

在日常生活和工作中&#xff0c;经常会遇到需要修改文件夹名称的情况。有时候是因为文件夹名称中包含了数字&#xff0c;有时候是因为文件夹名称不符合规范。无论出于什么原因&#xff0c;修改文件夹名称都是一件非常繁琐的事情。尤其是需要修改大量文件夹名称时&#xff0c;手…

Java系列之 String indexOf() 方法

我 | 在这里 &#x1f575;️ 读书 | 长沙 ⭐软件工程 ⭐ 本科 &#x1f3e0; 工作 | 广州 ⭐ Java 全栈开发&#xff08;软件工程师&#xff09; &#x1f383; 爱好 | 研究技术、旅游、阅读、运动、喜欢流行歌曲 &#x1f3f7;️ 标签 | 男 自律狂人 目标明确 责任心强 ✈️公…

【计算机网络】(网络层)定长掩码和变长掩码

目录 1、IPV4地址的应用规划 2、例题分析 2.1、定长的子网掩码 2.2、变长的子网掩码 1、IPV4地址的应用规划 定长的子网掩码&#xff08;FLSM&#xff09;&#xff1a; 使用同一个子网掩码划分子网&#xff0c;每个子网所分配的IP地址数量相同&#xff0c;造成IP地址的浪费…

数据结构——堆的实现

堆的实现-----C语言版 目录&#xff1a;一、堆的实现1.1堆的定义1.2堆的实现1.2.1堆的各个接口1.2.2堆的向上调整1.2.3堆的向下调整1.2.4堆的定义声明和初始化1.2.5堆的数据处理1.2.6堆的判空和堆的数据个数以及堆销毁1.2.7堆的代码实现 二、TOP—K问题 目录&#xff1a; 一、…

历时半年,我发布了一款习惯打卡小程序

半年多前&#xff0c;我一直困扰于如何记录习惯打卡情况&#xff0c;在参考了市面上绝大多数的习惯培养程序后&#xff0c;终于创建并发布了这款习惯打卡小程序。 “我的小日常打卡”小程序主要提供习惯打卡和专注训练功能。致力于培养用户养成一个个好的习惯&#xff0c;改掉…

[Latex] Riemann 问题中的激波,接触间断,膨胀波的 Tikz 绘图

Latex 代码 \begin{figure}\begin{subfigure}[b]{0.32\textwidth}\centering\resizebox{\linewidth}{!}{\begin{tikzpicture}\coordinate (o) at (0,0);\coordinate (Si) at (2.5,2.5);\coordinate (x) at (1,0);\draw[->] (0,0) -- (3,0) node[right] {$x$};\draw[->] …

tp8 使用rabbitMQ(4)路由模式

路由模式 在第三节中我们使用的 交换机的 fanout 把生产者的消息广播到了所有与它绑定的队列中处理&#xff0c;但是我们能不能把特定的消息&#xff0c;发送给指定的队列&#xff0c;而不是广播给所有队列呢&#xff1f; 如图&#xff0c;交换机把 orange 类型的消息发送给了…

jQuery_02 引入jQuery,初试牛刀

引入jquery文件 我们在官网上点击dowmload那个 会发现进入了一个网页&#xff0c;里面全部是代码&#xff0c;你可能还在想为什么下载不了&#xff0c;其实jquery不跟vue一样&#xff0c;整个jquery就是一个js文件而已&#xff0c;所以直接ctrla 全选 ctrlc复制 &#xff0c;然…

关于爱普生L3219彩色喷墨打印机打印过程中噪声过大的几点缓解方法

故障描述&#xff1a; 一台新购买的爱普生L3219使用过程中出现了噪声过大的问题&#xff0c;每次打印或者复印都或有明显的噪音过大的现象&#xff0c;目测观察大概是打印机字车左右来回移动的时候剐蹭滑道的问题&#xff0c;与经销商沟通后由经销商联系上级供货商更换一台全新…