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
}
相关推荐
吴声子夜歌7 分钟前
Vue.js——自定义指令
前端·vue.js·flutter
小芝麻咿呀15 分钟前
vue--面试题第一部分
前端·javascript·vue.js
nibabaoo1 小时前
前端开发攻略---H5页面手机获取摄像头权限回显出画面并且同步到PC页面
javascript·websocket·实时音视频·实时同步·录制
早起傻一天~G1 小时前
vue2+element-UI表格封装
javascript·vue.js·ui
这儿有一堆花1 小时前
深入解析 Video.js:现代 Web 视频播放的工程实践
前端·javascript·音视频
烤麻辣烫1 小时前
JS基础
开发语言·前端·javascript·学习
IT_陈寒2 小时前
Vue的响应式把我坑惨了,原来问题出在这
前端·人工智能·后端
2603_953527992 小时前
WordPress Finale Lite 插件高危漏洞检测与利用工具 (CVE-2024-30485)
前端·python·安全·web3·xss
2601_949818092 小时前
头歌答案--爬虫实战
java·前端·爬虫