AntDesignVue2之a-table中key不唯一问题处理的多种方式
文章目录
1. key不唯一问题
1. 问题描述
antdv: Each record in table should have a unique
key
prop,or setrowKey
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不需要冒号-->