<a-table
:columns="columns"
:pagination="pagination"
:data-source="dataSource"
:defaultExpandAllRows="true"
@change="tableChange"
:rowKey="(record, index) => index + 1"
>
columns是表格列的配置,data-source是数据源,在标签中加入
:rowKey="(record, index) => index + 1" ,再在columns配置中加入
{
title: "序号",
customRender: (text, record, index) => index + 1,
},
就可以显示序号。
第二种方法
在columns配置中加入
{
title: "序号",
scopedSlots: { customRender: "index" },
}
之后在html代码中加入
<a-table
:columns="columns"
:pagination="pagination"
:data-source="dataSource"
:defaultExpandAllRows="true"
@change="tableChange"
:rowKey="(record, index) => index + 1"
>
<template slot="index" slot-scope="text, record, index">
{{ index + 1 }}
</template>
</a-table>
如果在过程中报了这个错:
a-table将数据源默认将每列数据的key属性作为唯一的标识,添加的序号列没有key值,所以需要使用rowKey来指定数据列的主键。若没有指定,控制台会出现缺少 key 的提示。