vue3中element-plus实现分页index连续性

最新推荐文章于 2025-11-13 12:08:47 发布

原创最新推荐文章于 2025-11-13 12:08:47 发布 · 706 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

本文介绍了如何在ElementPlus的表格组件中实现分页时index的连续显示，提供了两种方法：一是通过模板动态计算索引，二是使用`index`属性配合JavaScript计算。

element-plus实现分页index连续性

解决方法

方法一

<el-table-column label="#" align="center" type="index">
        <template v-slot="{ $index }">
          <span>{{ $index + pageSize * (pageNo - 1) + 1 }}</span>
        </template>
      </el-table-column>
其中pageSize 代表一页展示多少条数据，pageNo 代表当前在第几页

方法二

 ## 模版
 <el-table-column
        label="#"
        align="center"
        type="index"
        :index="tableIndex"
      >
      
## js写法
 let tableIndex = (index: number) => {
   return index + pageSize.value * (pageNo.value - 1) + 1;
};