el-table分页后序号连续的两种方法

实现效果:

第一页排序到10,第二页的排序应从11开始

实现方法一:

在el-table的序号列中使用 template定义

复制代码
<el-table>
  <el-table-column
          min-width="10%"
          label="序号"
        >
      <template slot-scope="scope">
            <span>{{(currentPage - 1) * pageSize + scope.$index + 1}}</span>
       </template>
  </el-table-column>
</el-table>

实现方法二:

在el-table的序号列中进行index的方法定义,本质上还是进行了当前页码数乘以每页条数后加1的操作。

复制代码
<el-table-column label="序号" type="index" :index="indexAdd" width="50" />

在methods中:

复制代码
indexAdd(index) {
      const page = this.pageParams.page // 当前页码
      const pagesize = this.pageParams.pagesize // 每页条数
      return index + 1 + (page - 1) * pagesize
}
相关推荐
GISer_Jing1 小时前
Three.JS渲染架构解读
java·javascript·架构
发现一只大呆瓜1 小时前
超全 Vite 性能优化指南:网络、资源、预渲染三维落地方案
前端·面试·vite
IT_陈寒1 小时前
Vue的computed属性怎么突然不更新了?
前端·人工智能·后端
时寒的笔记1 小时前
day13~14核心案例某采招网
开发语言·javascript·ecmascript
智商不够_熬夜来凑2 小时前
【Picker】单选多选
前端·javascript·vue.js
米饭不加菜2 小时前
Typora 原生流程图语法完全指南(Flowchart.js)
前端·javascript·流程图
scan7242 小时前
langgraphy条件边
前端·javascript·html
冰小忆3 小时前
类变量在继承场景下的初始化规则是怎样的?
java·前端·数据库
用户938515635073 小时前
《JS 对象知识地图:10 个小节,从字面量到原型链全覆盖》
javascript
YAwu113 小时前
JavaScript this 底层机制剖析
前端·javascript