el-table 添加“序号“列和分页时，控制后面几页的index不从1开始

小灰灰 2023-07-11 11:14 1阅读 0赞

给“序号”列添加 :index=“indexMethod”

<el-table ref="table2" :data="tableData2" highlight-current-row style="width: 100%">
           <el-table-column fixed label="序号" type="index" :index="indexMethod" width="50">
           </el-table-column>
    </el-table>
    
     <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="pagination.pageSizes" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
    </el-pagination>

data(){ 
    	return{ 
    		pagination:{ 
               pageSizes:[10,15,20,25],
               total:0,
               pageSize:10,
               currentPage:1
            }
    	}
    }
    methods:{ 
    	indexMethod(index){ 
            return (this.pagination.currentPage - 1) * this.pagination.pageSize + index + 1
        },
        handleSizeChange(val) { 
            console.log(`每页 ${ val} 条`);
        },
        handleCurrentChange(val) { 
            console.log(`当前页: ${ val}`);
       },
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关基于Mybatis的分页控制 - PageHelper分页控制底层原理

分页是基于WEB的应用绕不开的话题，一般情况下基于Mybatis的java项目可选的分页方案包括： 1. 开源项目PageHelper。 2. 基于Mybatis的Row

电玩女神/ 2024年03月26日 14:04/ 0 赞/ 84 阅读

相关 el-table翻页序号不从1开始（已解决）

法一：赋值方式（亲测有效） <el-table-column type="index" fixed="left" align="center" :index=

港控/mmm°/ 2023年08月17日 16:34/ 0 赞/ 116 阅读

相关 el-table 添加“序号“列和分页时，控制后面几页的index不从1开始

给“序号”列添加 :index=“indexMethod” <el-table ref="table2" :data="tableData2" highlight-c

小灰灰/ 2023年07月11日 11:14/ 0 赞/ 2 阅读

相关 js 列表，分页

<pre name="code" class="javascript">$(document).ready(initPage); var pag

秒速五厘米/ 2022年09月23日 08:08/ 0 赞/ 191 阅读

相关 swiper-添加控制按钮（可以控制翻页上一页和下一页）

本次内容我们介绍在swiper页面当中添加控制按钮（可以控制翻页上一页和下一页）。首先搭建基础的swiper页面布局。然后我们主要将翻页按钮的div（.swipe

川长思鸟来/ 2022年09月23日 04:00/ 0 赞/ 1180 阅读

相关 kettle 生成分页序号

kettle 生成分页序号 kettle能够自定义参数，对参数进行计算和映射（http://blog.csdn.net/wild46cat/article/details

た入场券/ 2022年06月18日 07:17/ 0 赞/ 386 阅读

相关 bootstrap table 显示序号,分页有效

{ field : 'Number', title : '序号', al

悠悠/ 2022年06月06日 08:15/ 0 赞/ 636 阅读

相关 Angular1.x实现分页和分页算法

页面HTML代码： 1.  <ul class="pagination" style="margin: 0px;" >

冷不防/ 2022年05月26日 13:10/ 0 赞/ 251 阅读

相关分页工具显示当前页，前几页，后几页

有次面试，说让写一段代码，输入当前页码，显示当前页码前几页，后几页。当时时间紧张，逻辑是写出来了，可是边界有问题，现在闲来无事，就写了一个。下面的代码显示的是当前页码的前两页，

小灰灰/ 2022年03月25日 15:04/ 0 赞/ 303 阅读

相关 word分页，添加页码：Word页码从第三页开始设置方法

许多应届毕业生在排版毕业论文时候，都会按要求设置页码，第一页是封面，第二页是目录，那么正文内容就要从第三页正式开始了。按照正规设置方式，那么页码此时应该是第三页。但是按照论文格

绝地灬酷狼/ 2022年01月22日 02:49/ 0 赞/ 322 阅读