AntDesignVue2之a-table中key不唯一問題處理的多種方式

1. key不唯一問題

1. 問題描述

antdv: Each record in table should have a unique key prop,or set rowKey to an unique primary key

2. 解決方法

1. 帶冒號的rowKey

解決方法: 使用:rowKey指定唯一屬性。如下

<a-table:columns="columns":data-source="tableData"size="middle":rowKey='data=>data.id'
</a-table>
<!--id為 tableData 中的一個屬性-->

2 . 帶冒號的rowKey綁定表達式

解決方法：:rowKey中綁定表達式，如下面的(data,index)=>{return index}

<a-table:columns="columns":data-source="tableData"size="middle":rowKey="(data,index)=>{return index}"
</a-table>
<!--data 為每一條數據, index為 索引-->

3. 不帶冒號的rowKey屬性

解決方法：不帶冒號的rowKey屬性指定數據記錄中的唯一id，不帶的冒號表示綁定的就是值。如下

<a-table:columns="columns":data-source="tableData"size="middle"rowKey="id"
</a-table>
<!--id為 tableData 中的一個唯一屬性，且這里的rowKey不需要冒號-->