antd-vue table显示序号（自动递增，分页后也不影响）

野性酷女 2022-11-05 08:33 691阅读 0赞

## 效果图： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20210304170054988.png]

## 实现方法： ##

<a-table :loading="tableLoading" :columns="columns" :data-source="tableData" rowKey="id" :rowClassName="rowClassName" :customRow="customRow" bordered>
                      <span slot="num" slot-scope="text,records,index">
                        {
       { (currentPage-1)*pageSize+Number(index)+1 }}
                      </span>
                    </a-table>

data:
    	  currentPage: 1, // 当前第几页
          pageSize: 9, // 每页显示条数
          columns: [
    	      { 
    		    title: '序号',
    		    scopedSlots: {  customRender: 'num' }
    		  },
    		  { 
    		    title: '标签名称',
    		    dataIndex: 'name',
    		    key: 'name'
    		  },
    		  { 
    		    title: '',
    		    key: 'action',
    		    scopedSlots: {  customRender: 'action' }
    		  }
          ]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70]: /images/20221023/e59eb459cf2d4ce9b04ba552c77ceb3b.png
[20210304170054988.png]: /images/20221023/1fd6438573a847faa6cbbd359e1caca7.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 antd-vue table显示序号（自动递增，分页后也不影响）

效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

野性酷女/ 2022年11月05日 08:33/ 0 赞/ 692 阅读

相关 kettle 生成分页序号

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

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

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

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

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

相关 CSS counter计数器(content目录序号自动递增)详解

CSS Counters用到的属性前面也提到过，使用CSS Counters给元素创建自动递增计算器不仅仅是依赖于某一个CSS属性来完成，他需要几个属性一起使用才会有效

r囧r小猫/ 2022年05月26日 01:52/ 0 赞/ 425 阅读

相关 bootstrap table分页

1. 客户端分页 1) js页面 sidePagination : "client", // 设置在哪里进行分页，可选值为"client" 或者 "serv

小鱼儿/ 2022年04月23日 05:08/ 0 赞/ 212 阅读

相关 bootstarp table -- 分页数据显示

在bootstarp table 中，进行数据分页的显示，在使用分页的时候，bootStarp table 提供了两种方式，在这里我们介绍客户端(client)进行数据的分页

我会带着你远行/ 2022年04月12日 11:23/ 0 赞/ 321 阅读

相关解决bootstrap-table分页不成功问题

解决bootstrap-table表格生成以后不出现分页的情况 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow

电玩女神/ 2022年01月31日 10:47/ 0 赞/ 997 阅读

相关报表不分页显示设置

1 方案一使用数据分析预览，或者在预览的 URL 后增加&op=view进行访问，具体的可查看 [数据分析(op=view)][op_view] 章节。 2 方案二

旧城等待，/ 2021年09月24日 14:42/ 0 赞/ 391 阅读

相关 element 数据分页，后端什么也不管的分页

element el-pagination 数据分页提示：后端将数据全部返回给你，具体怎么分页，自己操作前言提示：以下是本篇文章正文内容，下面案例可供参考

痛定思痛。/ 2021年09月02日 05:52/ 0 赞/ 265 阅读