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-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>

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

苹果引导式访问是什么意思?怎么使用?这里有答案!

可能还有很多小伙伴都不知道&#xff0c;苹果手机里有一个隐藏的功能叫做引导式访问。引导式访问是什么意思&#xff1f;引导式访问是一种特殊的功能&#xff0c;可以帮助用户限制在某个应用程序中的操作&#xff0c;以保护隐私或防止误操作。今天&#xff0c;小编将给大家详细…

【免费】小傅哥 DDD 开发小册

作者&#xff1a;小傅哥 博客&#xff1a;https://bugstack.cn 沉淀、分享、成长&#xff0c;让自己和他人都能有所收获&#xff01;&#x1f604; 大家好&#xff0c;我是技术UP主小傅哥。 如果在面试的时候&#xff0c;面试官问你DDD是什么&#xff0c;你怎么解释&#xff1…

某上市证券公司:管控文件交换行为 保护核心数据资产

客户简介 某上市证券公司成立于2001年&#xff0c;经营范围包括&#xff1a;证券经纪、证券投资咨询、证券承销与保荐、证券自营等。经过多年发展&#xff0c;在北京、上海、深圳、重庆、杭州、厦门等国内主要中心城市及甘肃省内各地市设立了15家分公司和80余家证券营业部。20…

F盘满了变成红色怎么清理?这4个简单方法记得收藏!

“因为我电脑的磁盘比较多&#xff0c;我通常会把一些比较重要的文件放在F盘中。但是很奇怪&#xff0c;我的F盘用着用着就满成红色了&#xff0c;这该怎么办呢&#xff1f;应该怎么进行清理呢&#xff1f;” 我们在使用电脑时都会发现&#xff0c;电脑上有很多的磁盘。我们可以…

python 爬百度热搜并生成词云

1、爬取百度body存入txt def get_baidu_hot():url "https://top.baidu.com/board?tabrealtime"headers {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3&…

Mysql 锁机制分析

整体业务代码精简逻辑如下&#xff1a; Transaction public void service(Integer id) {delete(id);insert(id); }数据库实例监控&#xff1a; 当时通过分析上游问题流量限流解决后&#xff0c;后续找时间又重新分析了下问题发生的根本原因&#xff0c;现将其总结如下&#xf…

Android : AlertDialog对话框、单选、多选、适配器-简单应用

示例图&#xff1a; 1 &#xff1a;创建 AlertDialog.Builder 对象&#xff1b; 2 &#xff1a;调用 setIcon() 设置图标&#xff0c; setTitle() 或 setCustomTitle() 设置标题&#xff1b; 3 &#xff1a;设置对话框的内容&#xff1a; setMessage() 还有其他方法来指定显示…

成为AI产品经理——模型构建流程(下)

目录 1.模型训练 2.模型验证 3.模型融合 4.模型部署 上节课我们讲了模型设计、特征工程&#xff0c;这节课我们来讲模型构建剩下的三个部分&#xff1a;模型训练、模型验证和模型融合。 1.模型训练 模型训练就是要不断地训练、验证、调优直至让模型达到最优。 那么怎么达…

沃趣班11月月考题目解析

沃趣班11月月考题目解析 1.在oracle中创建用户时&#xff0c;若未设置default tablespace关键字&#xff0c;则oracle将哪个表空间分配给用户作为默认表空间 答案&#xff1a;D.user SQL> create user mytest identified by 123456; SQL> grant connect to mytest; SQL…

【解决】HDFS JournalNode启动慢问题排查

文章目录 一. 问题描述二. 问题分析1. 排查机器性能2. DNS的问题 三. 问题解决 一句话&#xff1a;因为dns的问题导致journalnode启动时很慢&#xff0c;通过修复dns对0.0.0.0域名解析&#xff0c;修复此问题。 一. 问题描述 从journalnode启动到服务可用&#xff0c;完成RPC…

又一重量级RTOS及组件开源,免费商用,支持更宽松 MIT 协议

关注星标公众号&#xff0c;不错过精彩内容 作者 | strongerHuang 微信公众号 | strongerHuang 不知道大家有没有发现&#xff1a;面向大众的软件代码&#xff0c;开源才是“王道”&#xff1f; FreeRTOS之所以这么流行&#xff0c;很大程度在于它免费开源&#xff08;遵循MIT开…

22款奔驰S400L升级主动式氛围灯 光影彰显奔驰的完美

新款奔驰S级原车自带64色氛围灯&#xff0c;还可以升级原厂的主动式氛围灯&#xff0c;增加车内的氛围效果。主动式环境氛围灯包含263个LED光源&#xff0c;每隔1.6厘米就有一个LED光源&#xff0c;照明效果较过去明亮10倍&#xff0c;视觉效果更加绚丽&#xff0c;它还可结合智…

【C++】内存管理(new与delete)

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 前言 本篇文章我们一起来学习C的内存管理方式&…

「 高并发系统设计 」 如何提高系统性能

「 高并发系统设计 」 如何提高系统性能 参考&鸣谢 ⾼并发系统如何做性能优化&#xff1f; 玄明Hanko 高并发系统设计和优化的通用方法论 渝言家 文章目录 「 高并发系统设计 」 如何提高系统性能[toc]一、高并发系统设计三大目标高性能高可用可扩展 二、性能优化原则问题导…

设置滚动条样式

滚动条样式&#xff1a; 下面是代码&#xff1a; <!doctype html> <html lang"en"><head><meta charset"UTF-8"><title>CSS3自定义滚动条</title><style>header {font-family: Lobster, cursive;text-align: c…

Word/PPT/PDF怎么免费转为JPG图片?

1、打开金鸣表格文字识别网站。 2、点击导航条上的“软件下载” 3、安装并打开金鸣表格文字识别软件。 4、点击顶部导航栏的“文件转图片”。 5、选择需要转换成图片的文件&#xff08;支持Word/PPT/PDF&#xff09;. 6、点“打开”程序将自动分页转换为图片。

Linux(6):文件与文件系统的压缩,打包与备份

压缩文件的用途与技术 由于 1 byte 8 bits &#xff0c;所以每个byte当中会有8个空格&#xff0c;而每个空格可以是0,1。 其实文件里面有相当多的『空间』存在&#xff0c;并不是完全填满的&#xff0c;而『压缩』的技术就是将这些『空间』填满&#xff0c;以让整个文件占用…

【Proteus仿真】【51单片机】智能垃圾桶设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真51单片机控制器&#xff0c;使用报警模块、LCD1602液晶模块、按键模块、人体红外传感器、HCSR04超声波、有害气体传感器、SG90舵机等。 主要功能&#xff1a; 系统运行后&#xf…

Adobe的组织工具程序Bridge 2024 版本下载与安装

目录 前言一、Bridge 2024安装二、使用配置总结 前言 Adobe Bridge是由 Adobe 公司开发的一款用于管理和组织创意资产的工具。它是Adobe Creative Cloud 套件的一部分&#xff0c;为设计师、摄影师和其他创意专业人员提供了一个集中管理和浏览其多媒体文件的平台。注&#xff…

ES6 — ES14 新特性

一、ES6 新特性&#xff08;2015&#xff09; 1. let和const 在ES6中&#xff0c;新增了let和const关键字&#xff0c;其中 let 主要用来声明变量&#xff0c;而 const 通常用来声明常量。let、const相对于var关键字有以下特点&#xff1a; 特性varletconst变量提升✔️全局…