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
}
相关推荐
Jackson@ML18 小时前
用ASP.NET创建一个Blazer Web应用程序
前端·asp.net·blazor
shepherd12618 小时前
Vue-Vben-Admin 从入门到实战:后端开发的前端探索之旅
前端·javascript·vue.js
CircleMouse19 小时前
介绍几个axios接口请求顺序的问题
开发语言·前端·javascript·ecmascript
摇滚侠19 小时前
Vue 项目实战《尚医通》,实名认证模块获取用户信息,笔记54
vue.js·笔记
o***Z44820 小时前
React自然语言
前端·react.js·前端框架
J***Q29220 小时前
React部署方案详解
前端·react.js·前端框架
q***R30820 小时前
React组件性能分析
前端·react.js·前端框架
5***790020 小时前
React趋势
前端·react.js·前端框架
1***y17820 小时前
React路径
前端·react.js·前端框架
m***D28620 小时前
React生态系统
前端·react.js·前端框架