Ant Design Vue, a-table component plus serial number

<a-table
   :columns="columns"
   :pagination="pagination"
   :data-source="dataSource"
   :defaultExpandAllRows="true"
   @change="tableChange"
   :rowKey="(record, index) => index + 1"
 >

        columns is the configuration of the table columns, and data-source is the data source, which is added to the label

:rowKey="(record, index) => index + 1" , then add it to the columns configuration

{
  title: "序号",
  customRender: (text, record, index) => index + 1,
},

The serial number will be displayed.

 The second method

Add to the columns configuration

{
 title: "序号",
 scopedSlots: { customRender: "index" },
}

Then add in the html code

<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>

        If this error is reported during the process:

         a-table defaults the data source to use the key attribute of each column of data as the unique identifier, and the added serial number column has no key value, so rowKey needs to be used to specify the primary key of the data column. If not specified, the console will prompt that the key is missing.

Guess you like

Origin blog.csdn.net/h360583690/article/details/130443169