Ant-design表格添加索引列

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

原创最新推荐文章于 2024-11-29 16:36:16 发布 · 3.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ant #vue

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

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