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
}
相关推荐
梨子同志几秒前
Vue 组件通信详解
前端·vue.js
carrieXin几秒前
Angular 可复用动态表单组件封装
前端
前端的日常1 分钟前
假如要做一个类似 ChatGPT 的聊天 UI,前端如何处理流式响应?
前端
讨厌吃蛋黄酥2 分钟前
🚀 为什么 Node.js 正在告别 CommonJS?一文读懂 JavaScript 模块化的前世今生
前端·javascript
无羡仙2 分钟前
React Hooks 解密:带你玩转现代Web开发的利器
前端
挽淚2 分钟前
从原生 DOM 到 React 的全景剖析
javascript
拾光拾趣录3 分钟前
深入解析 Vue.nextTick 源码:异步更新机制的核心实现
前端·vue.js
摆烂为不摆烂5 分钟前
😁深入JS(三): 一文让你完全了解原型,继承
前端
markyankee1015 分钟前
Vue 指令系统:构建动态界面的核心利器
javascript·vue.js
拾光拾趣录6 分钟前
在 Vue 中使用 SVG 图标
前端·vue.js·svg