vue2-element,vue3-element-plus 的列表翻页的序号

2023-11-03

前言:

这里整理下,vue2,vue3中用饿了么框架的列表,序号随页增加的功能

vue2:

page=当前页,pageSize=一页显示多少条

type="index" :index="indexMethod"

//  序号翻页连续排序
  indexMethod(index) {
    return (this.page-1)*this.pageSize+index+1;
  },

vue3:

page=当前页,pageSize=一页显示多少条

页面:

<el-table-column
        type="index"
        :index="indexMethod"
        label="序号"
        align="center">
      </el-table-column>

js:

setup () {

    //翻页分页递增
      const indexMethod = (index) => {
        return (state.searchForm.page-1) * state.searchForm.pageSize + index + 1;
      }
    return {
        indexMethod,
    }
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue2-element,vue3-element-plus 的列表翻页的序号 的相关文章

随机推荐

  • 优化代码逻辑之 K-近邻算法之鸢尾花实例 使用Spark实现KNN的Demo2

    这篇代码是KNN的优化 代码就是 flatMap里面的结构转换 和aggregate的应用感觉有点难理解 但是思想简单 首先要知道这个优化是基于 有个大数据的思想 分而治之 求出一份数据最大的前一百个数 如果数据太多 内存太小 则将数据切割
  • AndroidStudio AIDL 示例代码详细步骤

    AIDL Android Interface Definition Language 即Android接口定义语言 最近在看Binder的原理 Android里面AIDL就是Binder的经典实现 先记录一下AIDL的使用步骤 1 服务端S
  • 神奇的master公式(递归行为时间复杂度)

    master master公式是干嘛的呀 master公式是干嘛的呀 master是一个对于递归行为时间复杂度的估算 公式为 T N a T N b O N d 不用急我们来举一个栗子 我们先来看看二分法求最大值的代码 public int
  • 疯狂的程序员--绝影

    该博客转自新浪博客 作者 疯狂之桥 网址 http blog sina cn dpool blog s blog a46817ff010157cf html vt 4 今天看到绝影的CSDN博客由于种种原因被关闭了 心中有种说不出的感觉 感
  • python爬虫(一)

    目录 前言 一 爬虫简介 1 1 Python爬虫 1 2 robots协议 二 爬虫分类 2 1 通用网络爬虫 2 2 垂直网络爬虫 2 3 增量式网络爬虫 2 4 分布式网络爬虫 2 5 深度网络爬虫 2 6 搜索引擎爬虫 三 爬虫构造
  • [学习交流] OC学习笔记之id类型及应用场景

    1 NSObject访问子类方法 NSObject是所有类的基类 可以指向任何子类 例如 import
  • 【暴力破解】dvwa

    dvwa暴力破解练习 1 low 首先进行抓包 将包发送到intruder 然后对用户及密码进行暴力破解 成功 Mid 在low的基础上添加了一定的时延 不适合大量字典 但是爆破方式与low相同 High 点击进表单页面抓包包1 放掉之后再
  • parseInt()详解

    可能绝大多数学过js的就知道parseInt 函数 这里对小伙伴来说是有一个难点或者说是误区的 好吧 说的就是我 那就是在官方给的解释中我们能看到其中一个参数 radix 文中多次说他为基数 千万不要把它理解为要转换的进制 看上面的这些可能
  • docker 重启gitlab_Gitlab+CICD自动化部署Python项目

    使用CICD原理 当我们push项目到gitlab 就会触发 gitlab ci yml 文件 文件里面的 only maste表示 当push的分支为master则执行脚本 执行时通过tags shell选择已有的runner去执行 这时
  • 微信小程序——关于时间

    获取当前时间 var time new Date var year dateNow getFullYear var month dateNow getMonth 1 var day dateNow getDate var date year
  • 【2023最新版】Linux (WSL:Ubuntu22.04)安装Go1.20.6+Win11:安装Go1.20.6+GoLand2023.1.4+配置环境

    目录 一 Windows安装Go 1 下载地址 2 安装 3 配置Go环境变量 位置 默认添加的环境变量 修改环境变量 新建以下文件夹 检查 二 Linux WSL 安装Go 1 下载 2 解压缩 3 查看安装在系统上的Go版本 4 设置G
  • 《操作系统》- 操作系统的基本概念

    目录 一 操作系统的概念 1 1 操作系统的分类 1 2 计算机系统的构成 1 3 操作系统都做了哪些事 二 操作系统的目标和功能 2 1 操作系统的目标 2 2 操作系统的功能 三 操作系统的特征 3 1 并发 3 2 共享 3 3 虚拟
  • Java垃圾回收机制深入理解

    文章目录 一 简介 二 Java内存结构 三 什么是垃圾 四 垃圾收集算法 1 标记 清除算法 Mark and Sweep 2 复制算法 Copying 3 标记 整理算法 Mark and Compact 4 分代收集算法 Genera
  • 微软live服务器地址,在Mail中设置windows Live hotmail方法

    Mail是苹果系统的内置软件 是一款非常棒的软件 用起来很自然 起码和outlook比起来给人的感觉是这样 接下来是小编为大家收集的在Mail中设置windows Live hotmail方法 希望能帮到大家 在Mail中设置windows
  • c++ 在一行中输入若干个数,以空格间隔

    在一行中输入若干个数 以空格间隔 直到输入回车以结束 这是我在做PTA的题的时候发现回车输入逻辑有先后区别 题目如下 给出若干个正整数 请找出出现次数最多的数 输入格式 在一行中输入若干个数 以空格间隔 读入数的总个数不超过5000 输出格
  • ModuleNotFoundError: No module named ‘distutils.util 的解决方法

    ModuleNotFoundError No module named distutils util 的解决方法 使用 curl https bootstrap pypa io get pip py o get pip py sudo py
  • python轮胎缺陷检测_基于数字图像处理的轮胎缺陷检测

    摘要 随着汽车工业和道路交通运输业的迅猛发展 由于子午线轮胎具有胎面不容易变形 比较良好的稳定性 使用安全和耐用等特点 并且子午线轮胎的功能明显优越于普通斜交胎 其应用越来越普遍 已成为世界轮胎发展中的主要产品 但是子午线轮胎在制造过程中工
  • Navicat for mysql连接mysql时遇到的问题及其解决方法

    今天电脑重新装mysql 遇到了一个问题 authentication plugin caching 大概这样 懒得写了 找了好多教程 乱七八糟的就是解决不了 最后找到一篇博客https blog csdn net u011182575 a
  • 7. python爬虫——基于xpath爬取58同城房源信息

    python爬虫 基于xpath爬取58同城房源信息 1 需求 2 分析 3 代码 4 实现效果 1 需求 获取58同城上所有房源的标题信息 https bj 58 com ershoufang 2 分析 使用抓包工具进行分析 发现所有的房
  • vue2-element,vue3-element-plus 的列表翻页的序号

    前言 这里整理下 vue2 vue3中用饿了么框架的列表 序号随页增加的功能 vue2 page 当前页 pageSize 一页显示多少条 type index index indexMethod 序号翻页连续排序 indexMethod