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="(レコード, インデックス) => インデックス + 1" 、それを列構成に追加します

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

シリアル番号が表示されます。

 2番目の方法

列構成に追加する

{
 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 では、データ ソースがデータの各列のキー属性を一意の識別子として使用するようにデフォルト設定されており、追加されたシリアル番号列にはキー値がないため、rowKey を使用してデータ列の主キーを指定する必要があります。指定しない場合、コンソールはキーが見つからないことを示すプロンプトを表示します。