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
}
相关推荐
天天扭码11 分钟前
前端如何实现RAG?一文带你速通,使用RAG实现长期记忆
前端·node.js·ai编程
一条可有可无的咸鱼37 分钟前
企业招聘信息,企业资讯进行公示
java·vue.js·spring boot·uni-app
Luna-player1 小时前
在前端中,<a> 标签的 href=“javascript:;“ 这个是什么意思
开发语言·前端·javascript
lionliu05191 小时前
js的扩展运算符的理解
前端·javascript·vue.js
小草cys1 小时前
项目7-七彩天气app任务7.4.2“关于”弹窗
开发语言·前端·javascript
奇舞精选1 小时前
GELab-Zero 技术解析:当豆包联手中兴,开源界如何守住端侧 AI 的“最后防线”?
前端·aigc
奇舞精选1 小时前
Vercel AI SDK:构建现代 Web AI 应用指南
前端·aigc
神仙别闹2 小时前
基于C语言实现B树存储的图书管理系统
c语言·前端·b树
玄魂2 小时前
如何查看、生成 github 开源项目star 图表
前端·开源·echarts
前端一小卒3 小时前
一个看似“送分”的需求为何翻车?——前端状态机实战指南
前端·javascript·面试