Ant-design表格添加索引列

分为两种情况:
1、每一页索引都从1开始

<a-table :colums="colums"></a-table>
//配置表格的columns:
...
colums: [
    {
        title: '排名',
        customRender:(text,record,index) => index + 1
    },
    {
        title: '姓名',
        dataIndex:'uname'
    },
    {
        title: '分数',
        dataIndex:'score'
    }
    //...
]

2、有分页情况且连续自增

<a-table :colums="colums" :pagination="pagination"></a-table>

data() {
    return {
        pagination:
        {
            total: 0,
            defaultCurrent: 1,
            defaultPageSize: 10,
            showTotal: (total) => `共${total}条数据`,
            showSizeChanger: true,
            pageSizeOptions: ['5', '10', '15', '20'],
            onShowSizeChange: (current, pageSize) => {
              // this.pageSize = pageSize;
              this.pagination.defaultCurrent = current;
              this.pagination.defaultPageSize = pageSize;
            },
            onChange: (current, pageSize) => {
              // this.pageSize = pageSize;
              this.pagination.defaultCurrent = current;
              this.pagination.defaultPageSize = pageSize;
            },
          }},
        colums: [
            {
                title: '排名',
                customRender:(text,record,index) => 
                this.pagination ? `${(this.pagination.defaultCurrent-1)*(thi.pagination.defaultPageSize)+index+1}` :index+1
            },
            {
                title: '姓名',
                dataIndex:'uname'
            },
            {
                title: '分数',
                dataIndex:'score'
            }
            //...
        ],
        
    }
};


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值