elementui el-table根据分页显示表格序号

最新推荐文章于 2024-09-10 14:29:47 发布

原创最新推荐文章于 2024-09-10 14:29:47 发布 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

elementui 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在Element UI的ElTable组件中，根据分页和每页显示数量自定义显示序号，通过计算当前页码和每页数量，实现序号的动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每页显示的序号都是一样的：

<el-table :data="tableData" highlight-current-row @current-change="handleCurrentChange">
    <el-table-column
      type="index"
      width="50">
    </el-table-column>
<el-table>

根据分页显示序号：
当前点击的页码： currentPage
每页显示的数量： pageSize

<el-table :data="tableData"  border>
    <el-table-column label="序号" align="center" width="70">
          <template scope="scope"><span>{{scope.$index+(currentPage - 1) * pageSize + 1}} </span></template>
    </el-table-column>
<el-table>