element分页

news2024/10/6 18:34:43

获取数据信息,这是表格和分页内容

<el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="xuhao" label="序号"></el-table-column>
            <el-table-column prop="createDate" label="日期"></el-table-column>
            <el-table-column prop="username" label="操作人"></el-table-column>
            <el-table-column prop="operation" label="操作人"></el-table-column>
            <el-table-column prop="ip" label="IP地址"></el-table-column>
          </el-table>
        </div>
        <div class="block" style="margin-top:15px;">
          <el-pagination align ="center" @size-change="handleSizeChange" @current-change="handleCurrentChange" 
          :current-page="currentPage" 
          :page-sizes="[5,10,20,50,100]" 
          :page-size="pageSize" 
          layout="total, sizes, prev, pager, next, jumper" 
          :total="msgTotal">
          </el-pagination>
        </div>
      </el-col>

注释:tableDate是表格数据内容

          currentPage: 1, // 当前页码

          msgTotal: 0, // 总条数

          pageSize: 10 // 每页的数据条数

加载方法:

methods:{
      //每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.pageSize = val;
          this.currentPage = 1;
          this.getMessagesList(this.currentPage,val);
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.currentPage = val;
          this.getMessagesList(val,this.pageSize);
      },

      //分页方法(重点)
      getMessagesList(k,v){
        this.$axios.get("接口"+'/'+ k +'/'+ v).then((res) => {
          this.tableData=[];
        if(!res.data){
          this.$message.error(this.msg.message);
          
        }else{
          const date_list = res.data.data.list.reverse()
          this.currentPage = res.data.data.pageNum
          this.pageSize = res.data.data.pageSize
          this.msgTotal = res.data.data.total
          this.tableData = date_list.map((key,value)=>{
            // key.xuhao = value+1
            key.xuhao = (k*v -v + value)+1 //用于排序,后台返回时该遍历方式就不用写,直接赋值就行
            key.createDate = key.createDate
            key.username  = key.username
            key.operation  = key.operation
            key.ip  = key.ip
            return key
          })
        }
      })
      .catch((err) => {
        console.log(err);
      });
      }
    }

操作结果:

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

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

相关文章

WorkPlus:企业数字化底座,统一数字化办公入口

在企业数字化转型的潮流下&#xff0c;统一入口的移动数字化底座成为了企业提高工作效率和迈向数字化时代的关键要素。在这个领域&#xff0c;WorkPlus凭借其独特的定位和功能&#xff0c;成为了企业微信、钉钉、飞书等类似产品中的完美选择&#xff0c;为企业提供了统一入口的…

旋转矩阵-数学理论

目录 概述 一、固定旋转&#xff08;Fix Angles&#xff09; 二、欧拉旋转&#xff08;Euler Angle&#xff09; 三、旋转矩阵小结 四、参考 概述 旋转矩阵是姿态的一种数学表达方式&#xff0c;或者笼统说变换矩阵是一种抽象的数学变量。其抽象在于当你看到…

【深度学习】卷积层填充和步幅以及其大小关系

参考链接 【深度学习】&#xff1a;《PyTorch入门到项目实战》卷积神经网络2-2&#xff1a;填充(padding)和步幅(stride) 一、卷积 卷积是在深度学习中的一种重要操作&#xff0c;但实际上它是一种互相关操作&#xff0c;&#xff0c;首先我们来了解一下二维互相关&#xff…

Redis主从配置和哨兵模式

主从简介 1、主从 – 用法 像MySQL一样&#xff0c;redis是支持主从同步的&#xff0c;而且也支持一主多从以及多级从结构。 主从结构&#xff0c;一是为了纯粹的冗余备份&#xff0c;二是为了提升读性能&#xff0c;比如很消耗性能的SORT就可以由从服务器来承担。 redis的主…

oracle-sql语句解析类型

语句执行过程&#xff1a;1. 解析(将sql解析成执行计划) 2.执行 3.获取数据(fetch) 1. shared pool的组成。 share pool是一块内存池。 主要分成3块空间。free&#xff0c; library(库缓存&#xff0c;缓存sql以及执行计划)&#xff0c;row cache(字典缓存) select * from v…

云贝教育 |【PostgreSQL PGCA】pg15安装pg_hint_plan扩展包

pg15安装pg_hint_plan扩展包 pg当前是支持HINT固定执行计划&#xff0c;需要通过扩展包pg_hint_plan来实现 一、扩展包下载&#xff1a; Releases ossc-db/pg_hint_plan GitHub 二、选择v15版本 pg_hint_plan15 1.5.1 is released pg_hint_plan15 1.5.1 is released. This…

SLAM从入门到精通(安全避障)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 在工业生产中&#xff0c;安全是底线。没有安全性的技术&#xff0c;一般也不会在工业生产中进行部署、使用。对于slam来说&#xff0c;同样也是这…

机器人制作开源方案 | 行星探测车实现云端控制

1. 功能描述 本文示例所实现的功能为&#xff1a;手机端控制R261样机行星探测车的显示屏显示心形图。 2. 电子硬件 在这个示例中&#xff0c;我们采用了以下硬件&#xff0c;请大家参考&#xff1a; 3. 功能实现 编程环境&#xff1a;Milxy 0.999及以上版本 下面提供一个手机…

TerraNoise for 3dMax插件教程

TerraNoise for 3dMax插件教程 创建地形&#xff1a; - 从列表中拖动生成器并将其放到画布上 - 将导出器拖放到画布上 - 通过将一条线从生成器黄色输出“拖动”到导出器绿色输入来连接 2 个组件 - 单击导出器中的“无”按钮用于选择输出名称和格式&#xff08;导出 terragen 地…

Python装饰器的艺术

文章目录 装饰器基础示例代码:执行结果:参数化装饰器示例代码:执行结果:类装饰器示例代码:执行结果:装饰器的堆栈示例代码:执行结果:在Python中,装饰器是一种非常强大的特性,允许开发人员以一种干净、可读性强的方式修改或增强函数和方法。以下是一个关于Python装饰器…

聊聊定时器 setTimeout 的时延问题

给大家推荐一个实用面试题库 1、前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;web前端面试题库 全局的 setTimeout() 方法设置一个定时器&#xff0c;一旦定时器到期&#xff0c;就会执行一个函数或指定的代码片…

【开源】前后端分离后台管理系统

系统环境 JDK 17Maven 3.0.0MySQL 5.7.0Spring Boot 3.0.10 演示 橙子官网&#xff1a;http://hengzq.cnGitHub 代码下载&#xff1a;https://github.com/mmd0308/orangeGitee 代码下载&#xff1a;https://gitee.com/hengzq/orange 项目截图

Algorithms_LSM树(Log-Structured Merge Tree)

文章目录 引言1. LSM树的原理1.1 写入日志1.2 内存组件1.3 磁盘上的SSTable文件1.4 合并操作 2. LSM树的使用场景2.1 分布式数据库系统2.2 云存储系统2.3 日志和时间序列数据2.4 数据备份和归档 LSM VS BTree结论 引言 在当今信息时代&#xff0c;数据的存储和管理变得越来越重…

信息系统项目管理师第四版--风险管理--可搜索可编辑版本

1. 对目录进行了细化&#xff0c;从目录可以清晰看到每个过程的输入输出工具技术都有哪些&#xff0c;直接点击目录就可以跳转到相应的章节&#xff0c;免得自己在pdf文件里面一直翻一直翻&#xff0c;非常方便。是可编辑版本&#xff0c;还可以进行全文搜索。 下图是目录的部…

LoRaWAN物联网架构

与其他网关一样&#xff0c;LoRaWAN网关也需要在规定的工作频率上工作。在特定国家部署网关时&#xff0c;必须要遵循LoRa联盟的区域参数。不过&#xff0c;它是没有通用频率的&#xff0c;每个国家对使用非授权MHZ频段都有不同的法律规定。例如&#xff0c;中国的LoRaWAN频段是…

Centos7下搭建H3C log服务器

一、rsyslogH3C 安装rsyslog服务器 关闭防火墙 systemctl stop firewalld && systemctl disable firewalld关闭selinux sed -i s/enforcing/disabled/ /etc/selinux/config && setenforce 0centos7服务器&#xff0c;通过yum安装rsyslog yum -y install r…

如何用devtools快速开发一个R语言包?

如何用devtools快速开发一个R语言包&#xff1f; 1. 准备工作2. 如何完整开发一个R包3. 初始化新包4. 启用Git仓库5. 按照目标实现一个函数6. 在.R文件夹下创建文件并保存代码7. 函数测试8. 阶段性总结9. 时不时地检查完整工作状态10. 编辑DESCRIPTION文件11. 配置许可证12. 配…

vmware 启动qnx 环境下载配置

SDP QNX 安装手册 http://www.qnx.com/developers/docs/7.0.0/#com.qnx.doc.qnxsdp.quickstart/topic/install_host.html qnxsdp-6.5.0-x86-201007091524-nto.iso https://dude6.com/q/a/4990303.html http://www.qnx.com/download/feature.html?programid23647 vmarea …

【Linux】补充:进程管理之手动控制进程,以及计划任务

目录 一、手动启动进程 1、理解前台启动与后台启动 2、如何完成前台启动后台启动的切换 3、完成并行执行多个任务 4、结束进程 1、kill 2、killall 2、pkill 二、计划任务 1、at一次性计划任务 2、实操 2、周期性计划任务 1、关于设置周期性任务的配置文件以及格式…

react 实现chatGPT的打印机效果 兼容富文本,附git地址

1、方式一 &#xff1a;使用插件 typed.js typed.js 网站地址&#xff0c;点我打开 1.1、核心代码如下&#xff1a; //TypeWriteEffect/index.tsx 组件 import React, { useEffect, useRef } from react; import Typed from typed.js; import { PropsType } from ./index.d;…