Ant-design-vue中table表格序号连续递增问题

我们在vue中需要使用ant-design ui的表格组件的时候,通常会需要序号列作为第一列,表格通常会结合pagination分页器使用,此时序号的递增问题就会出现。

        主要是有两种场景:

        一、分页后序号重置

第一页和以后的每一页都是以序号1开始

像这种序号重置可以在column中直接配置如下:

columns: [

        {

          title: "序号",

          dataIndex: "index",

          key: "index",

          align: "center",

          customRender: (column) => {

            return (

              column.index + 1

            );

          },

        },
]

 

二、分页后序号继续连续递增

第一页             第二页

像这种分页后连续递增的需要结合分页的一些属性来计算序号

 

columns: [

        {

          title: "序号",

          dataIndex: "index",

          key: "index",

          align: "center",

          customRender: (column) => {

            return (

              (this.pagination.current - 1) * this.pagination.pageSize +

              column.index +1

                //序号=当前页数-1*每页数据条数+列数

            );

          },

        },
]

 分页属性配置如下:

pagination: {

        current: 1,

        defaultCurrent: 1,

        defaultPageSize: 10,

        pageSize: 10,

        showQuickJumper: true,

        showSizeChanger: true,

        showTotal: (total) => `共 ${total} 条数据`,

        showSizeChanger: true,

        pageSizeOptions: ["10", "15", "20"],

        onChange: (current, size) => {

          this.defaultPageSize = size;

          this.pagination.current = current;

        },

        //onChange:在分页数量和当前页发生变化时触发

        onShowSizeChange: (current, pageSize) => {

          this.pagination.pageSize = pageSize;

        },

        //onShowSizeChange:在分页数量发生变化时触发

      },

因为使用的是当前页和当前的pageSize来计算的序号,所以当pageSize发生变化时序号依旧可以准确显示。