700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue3+ts使用Ant Design实现表格序号自增

vue3+ts使用Ant Design实现表格序号自增

时间:2019-05-27 07:25:22

相关推荐

vue3+ts使用Ant Design实现表格序号自增

在Vue3中使用and design设置表格序号自增时,设置列的customRender属性为: ({ index }: { index: number }) =>${index + 1};如果有分页,设置全部页面自增:customRender: ({ index }: { index: number }) => {

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

}

不要忘记设置pagination 的chage事件,在change事件中要更新当前页面索引current,才能生效。

<a-tablesize="small"bordered:pagination="pagination":columns="columns":dataSource="state.ds":rowKey="(record: any) => record.id":loading="state.loading">

const pagination = reactive({current: 1,pageSize: 15,showTotal: (total: number) => `共${total}条记录`,onChange: (page: number) => {pagination.current = page}})const columns = [{title: '序号',align: 'center',// customRender: ({ index }: { index: number }) => `${index + 1}` //每页自增customRender: ({index }: {index: number }) => {return `${(pagination.current - 1) * pagination.pageSize + index + 1}`}},{title: '年份', dataIndex: 'pickYear', align: 'center' },]

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。