Ant Design Vue,a-table组件加序号
·
<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 的提示。
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)