<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 的提示。

Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐