当前位置: 首页 > news >正文

el-table 表格序号列前端实现递增,切换分页不从头开始

06dc70f0d8b54aebb7b447585bb0734f.png

   af28c1223492407898115cefb88a4af0.png

<el-table-column type="index" width="55" label="序号" :index="hIndex">

      </el-table-column>

分页

 <el-pagination

      @size-change="handleSizeChange" @current-change="handleCurrentChange">

    </el-pagination>

data中: 

   pageObj: {

        pagesize: 10,

        currpage: 1,

        pageIndexCopy: 1,

      },

 

方法中:

 hIndex(index) {

      // 当前页数 - 1 * 每页数据条数 + index + 1 ( index 是索引值,从0开始)

      return (this.pageObj.pageIndexCopy - 1) * this.pageObj.pagesize + index + 1

    },

  handleCurrentChange(val) {

      this.pageObj.currpage = val

      this.pageObj.pageIndexCopy = val

    },

其实正常后端也可以直接返回,前台就不用做这些了

 

http://www.lryc.cn/news/412562.html

相关文章:

  • NSSCTF-Web题目27(Nginx漏洞、php伪协议、php解析绕过)
  • 分割损失:Dice vs. IoU
  • SpringBoot整合Juint,ssm框架
  • 基于supervisor制作基于环境变量配置的redis
  • 动态规划part01 509. 斐波那契数 70. 爬楼梯 746. 使用最小花费爬楼梯
  • CSS实现图片边框酷炫效果
  • 遇到 MySQL 死锁问题如何解决?
  • Pyinstaller打包OSError: could not get source code【终极解决】
  • 【计算机毕业设计】707高校宿舍管理系统
  • 从C++看C#托管内存与非托管内存
  • Linux进程间通信--IPC之无名管道
  • Oracle19c数据库system密码锁定
  • java之hashCode() 方法和 equals(Object obj) 方法之间的关系
  • 首届「中国可观测日」圆满落幕
  • [Docker][Docker NetWork][下]详细讲解
  • 安卓系统在未来如何更好地解决隐私保护与数据安全的问题?
  • MySQL innodb单表上限一般多少
  • 更小、更安全、更透明:Google发布的Gemma推动负责任AI的进步
  • 基于Django框架的医疗耗材管理系统的设计实现-计算机毕设定制-附项目源码(可白嫖)48999
  • 物联网协议篇(1):modbus tcp和modbusRTU的区别是什么?
  • JVM系列 | 对象的消亡——HotSpot的设计细节
  • vue 运行或打包过程报错 JavaScript heap out of memory(内存溢出)
  • git分支提交方法
  • 从微架构到向量化--CPU性能优化指北
  • 声声入耳,事事如意 爱可声「如意」助听器即将上市!
  • 生物实验室设备文件采集如何才能质量和效率双管齐下?
  • Framework源码整编、单编、烧录过程
  • TypeScript类型断言
  • Mallet:一款针对任意协议的安全拦截代理工具
  • 【IEEE出版】第五届大数据、人工智能与软件工程国际研讨会(ICBASE 2024,9月20-22)