Vue之ant design table表格序号连续翻页自增(前端分页)

html:

<a-table v-else :columns="columnsCompany" :data-source="companyList" :pagination="pagination">

                        <template slot="index" slot-scope="text, record, index">

                            <span>

                                {{ (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1 }}

                            </span>

                        </template>

</a-table>

 

data:

const columnsCompany = [

    {

        title: '序号',

        dataIndex: 'index',

        key: 'index',

        align: 'center',

        width: 80,

        // customRender: (text,record,index) => `${index+1}`,

        scopedSlots: { customRender: 'index' },

    },

    {

        dataIndex: 'sendName',

        title: '发送名称',

        width: 150,

    }

]

 

 

pagination: {

                current: 1,

                pageSize: 10,

                total: 0,

                pageSizeOptions: ['10', '20', '50', '100'],

                showSizeChanger: true,

                showQuickJumper: true,

                onChange: (current, size) => {

                    this.pagination.current = current

                    this.pagination.pageSize = size

                },

                onShowSizeChange: (current, pageSize) => {

                    this.pagination.current = 1

                    this.pagination.pageSize = pageSize

                },

                showTotal: (total, range) => {

                    return `共 ${total} 项，当前显示${range[0]}-${range[1]}项`

                },

            },