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

野性酷女 2022-11-05 08:33 755阅读 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 条评论，755人围观）

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

相关阅读

相关 ElementUI中的el-table实现递增的序号列

场景 ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行： [https://mp.csdn.net/console/editor/html

忘是亡心i/ 2023年10月06日 14:16/ 0 赞/ 44 阅读

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

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

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

相关 layui分页显示不出来

没显示分页： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

淩亂°似流年/ 2023年05月31日 02:57/ 0 赞/ 5 阅读

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

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

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

相关 kettle 生成分页序号

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

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

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

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

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

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

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

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

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

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

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

相关报表不分页显示设置

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

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

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

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

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