Vue笔记-element ui中关于table的前端分页

news2024/11/29 8:59:34

对于 Element UI 表格的前端分页,可以在组件中使用 JavaScript 来实现数据的分页显示,而不必从后端获取已分页的数据。以下是一个简单的示例,演示如何在前端进行 Element UI 表格的分页:

<template>
  <div>
    <el-table
      :data="getCurrentPageData"
      style="width: 100%">
      <el-table-column
        label="日期"
        prop="date">
      </el-table-column>
      <el-table-column
        label="姓名"
        prop="name">
      </el-table-column>
      <el-table-column
        label="地址"
        prop="address">
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          // more data...
        ],
        currentPage: 1,
        pageSize: 10,
      };
    },
    computed: {
      getCurrentPageData() {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        return this.tableData.slice(start, end);
      }
    },
    methods: {
      handleCurrentChange(val) {
        this.currentPage = val;
      }
    }
  };
</script>

在这个示例中,使用了computed属性getCurrentPageData来根据当前页和每页显示条数来计算当前页面应该显示的数据。在分页变化时,我们通过handleCurrentChange方法来更新当前页数。这种方式可以在前端进行数据的分页展示。

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

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

相关文章

Tenda路由器 敏感信息泄露

0x01 产品描述&#xff1a; ‌ Tenda路由器‌是由深圳市吉祥腾达科技有限公司&#xff08;Tenda&#xff09;生产的一系列网络通信产品。Tenda路由器以其高性能、高性价比和广泛的应用场景而闻名&#xff0c;适合家庭、办公室和各种网络环境。0x02 漏洞描述&#xff1a…

助力AI智能化时代:全国产化飞腾FT2000+/64+昇腾310B服务器主板

在信息技术快速发展的今天&#xff0c;服务器作为数据处理和存储的核心设备&#xff0c;肩负着越来越重要的使命。全国产化的服务器主板&#xff0c;采用飞腾FT2000/64核处理器&#xff0c;搭配华为昇腾310的AI芯片&#xff0c;提供卓越的性能与可靠性。 核心配置&#xff0c;强…

SpringMVC学习(3)

目录 一、控制器Controller 二、RESTful风格 2.1 实际应用 三、结果跳转方式 3.1 ModelAndView 3.2 SpringMVC 3.2.1 无需视图解析器 3.2.2 需要视图解析器 3.3 ServletAPI 四、数据处理 4.1 处理提交数据 4.1.1 提交的域名称和处理方法的参数名一致 4.1.2 提交的…

淘宝商品评价API的获取与应用

随着电子商务的飞速发展&#xff0c;商品评价成为消费者做出购买决策的重要依据之一。对于电商平台而言&#xff0c;如何有效地管理和利用这些评价数据&#xff0c;提升用户体验和销售额&#xff0c;成为一个重要课题。淘宝作为国内最大的电商平台之一&#xff0c;其商品评价AP…

背包九讲——分组背包问题

目录 分组背包问题 问题定义 解题算法 问题解法 朴素解法&#xff1a; 一维优化解法 变式题型 背包问题第六讲——分组背包问题 背包问题是一类经典的组合优化问题&#xff0c;通常涉及在限定容量的背包中选择物品&#xff0c;以最大化某种价值或利益。问题的一般描述是…

模型 五遍沟通法(企业管理)

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。确保信息准确&#xff0c;促进共识。 1 五遍沟通法的应用 1.1 五遍沟通模型案例&#xff1a;新员工入职培训 一家日本科技公司新招聘了一批员工&#xff0c;人力资源部门需要确保新员工对公司的文化…

学习笔记——路由——IP组播-PIM-DM(密集模式)前言概述

7、PIM-DM(密集模式) (1)前言 PIM-DM(PIM Dense Mode)使用“推(Push)模式”转发组播报文&#xff0c;一般应用于组播组成员规模相对较小、相对密集的网络。 在实现过程中&#xff0c;它会假设网络中的组成员分布非常稠密&#xff0c;每个网段都可能存在组成员。当有活跃的组…

Oracle自动处理表空间不足脚本

关注过我的朋友们应该知道我分享过一些常用的监控脚本&#xff0c;其中最常用的就是监控表空间使用率的脚本&#xff0c;具体可以参考如下链接​&#xff1b; oracle常用监控脚本&#xff08;纯干货&#xff0c;没有EMCC,ZABBIX也不怕&#xff09;_oracle 监控及日常处理脚本-…

Jenkins+maven+git(gogs)自动化构建打包+部署(项目实战)

安装Jenkins所需插件 Maven IntegrationPublish Over SSHGit 系统管理>插件管理>Available plugins。在此安装所需要的插件 全部安装完成 配置Jenkins 系统管理>全局配置 JDK配置 这个jdk的目录是Jenkins容器里面的jdk目录&#xff0c;docker安装一般都是这…

提升网站流量和自然排名的SEO基本知识与策略分析

内容概要 在当今数字化时代&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;成为加强网站可见度和提升流量的重要工具。SEO的基础知识包括理解搜索引擎的工作原理&#xff0c;以及如何通过优化网站内容和结构来提高自然排名。白帽SEO和黑帽SEO代表了两种截然不同的策略&a…

uniapp开发小程序【简单的实现点击下拉选择性别功能】

一、展示效果 二、代码 <template><view><view class="form_box"><view class="item"

Flutter 在 对接 google play 时,利用 android studio 可视化生成 已签名的aab包

android studio 可视化生成 aab包 第一 &#xff1a; 先说注意事项 在Flutter项目里面&#xff0c;直接打开当前项目是不行的&#xff0c;不显示相应操作&#xff0c;需要在Android 目录打开&#xff0c;直白点就是直接打开项目里面的Android 目录 不然会出现的一些问题 第一…

【WRF数据处理】基于GIS4WRF插件将geotiff数据转为tiff(geogrid,WPS所需数据)

【WRF数据处理】基于GIS4WRF插件将geotiff数据转为tiff&#xff08;geogrid&#xff0c;WPS所需数据&#xff09; 数据准备&#xff1a;以叶面积指数LAI为例QGis实操&#xff1a;基于GIS4WRF插件将geotiff数据转为tiff警告&#xff1a;GIS4WRF: Input layer had an unexpected …

VictoriaMetrics 中文教程(10)集群版介绍

VictoriaMetrics 中文教程系列文章&#xff1a; VictoriaMetrics 中文教程&#xff08;01&#xff09;简介VictoriaMetrics 中文教程&#xff08;02&#xff09;安装VictoriaMetrics 中文教程&#xff08;03&#xff09;如何配置 Prometheus 使其把数据远程写入 VictoriaMetri…

3D Gaussian Splatting 入门

1 摘要 3D Gaussian Splatting是一种将点云表示为高斯分布&#xff08;Gaussian Distributions&#xff09;的方法&#xff0c;用于3D重建、渲染等领域。这种方法通过在3D空间中对点云进行参数化&#xff0c;使得每个点不仅有位置&#xff08;XYZ坐标&#xff09;&#xff0c;还…

https和http的区别,及HTTPS的工作流程

HTTP&#xff08;HyperText Transfer Protocol&#xff09;和HTTPS&#xff08;HyperText Transfer Protocol Secure&#xff09;都是超文本传输协议&#xff0c;但它们之间的关键区别在于安全性。 安全性&#xff1a; HTTP&#xff1a;数据以明文传输&#xff0c;没有加密&…

Docker | 将本地项目发布到阿里云的实现流程

发布到阿里云 本地镜像发布到阿里云流程具体流程1. docker commit 生成新镜像文件2. 查看镜像3. 阿里云开发者平台选择控制台&#xff0c;进入容器镜像服务&#xff0c;选择个人实例创建命名空间仓库名称进入管理界面获得脚本推送到阿里云 补充&#xff1a; docker tag 命令基本…

基于Pyecharts的数据可视化开发(二)调用通义千问api分析爬虫数据

上一篇博客做了关于“广州市2023年天气情况”的数据爬取&#xff0c;并保存为.csv文件。下一步是想用生成的.csv文件&#xff0c;直接调用大模型api进行分析&#xff0c;得出结论。通过调研&#xff0c;阿里云的通义千问大模型qwen-long可以实现对文件数据的分析。 通义千问大模…

【C++】入门C++

1.C的第一个程序 之前写的C语言文件都是后缀为.c的文件&#xff0c;进入C后就要把后缀改为.c了&#xff0c;vs编译器看到是.cpp就会调⽤C编译器编译。C兼容C语言的绝大多数语法&#xff0c;所以C语言的 hallo word 依旧可以在C下使用。 //test.cpp //c语言的hallo world #inc…

快速上手机器学习-朴素贝叶斯

朴素贝叶斯 引言&#xff1a;本文通过介绍先验概率&#xff0c;后验概率&#xff0c;条件概率计算和贝叶斯定理等概率论内容引入朴素贝叶斯分类算法的基本思路&#xff0c;朴素贝叶斯的最终分类思想是将输入分类给概率最大的类&#xff0c;这也是概率模型算法的共有思想。本文专…