vue el-pagination 分页数据获取序号(正序和倒序)

时间是包治百病的庸医

于 2021-05-24 15:20:09 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue html+css 经验分享

本文链接：https://blog.csdn.net/leng0920/article/details/117224295

经验分享同时被 3 个专栏收录

149 篇文章

订阅专栏

vue

136 篇文章

订阅专栏

html+css

113 篇文章

订阅专栏

这篇博客详细介绍了如何在前端使用El-Table组件实现表格数据的正序和倒序显示，通过调整`scope.$index`和计算总条目数来动态设置序号，适用于需要自定义排序的场景。

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

正序:(1,2.....9,10)

       <el-table-column label="顺序" width="100" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span
                      >{{ scope.$index + 1 + (pageIndex - 1) * pageSize }}
                    </span>
                  </template>
                </el-table-column>

倒序:(10,9....2,1)

   <el-table-column
                    label="序号"
                    v-if="checkedOptions.includes('序号')"
                    min-width="160"
                  >
                    <template slot-scope="scope">
                      <span>{{
                        total - ((pageIndex - 1) * pageSize + scope.$index)
                      }}</span>
                    </template>
                  </el-table-column>