Ant-design表格添加索引列

最新推荐文章于 2024-11-29 16:36:16 发布

我已经觉醒了

最新推荐文章于 2024-11-29 16:36:16 发布

阅读量3.7k

点赞数 2

文章标签： ant vue

本文链接：https://blog.youkuaiyun.com/SueLight/article/details/112463431

版权

博客介绍了分页索引的两种情况，一是每一页索引都从1开始，二是有分页且索引连续自增。

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

分为两种情况：
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'
            }
            //...
        ],
        
    }
};