本文主要是介绍AntDesignVue之a-table中key不唯一问题处理的多种方式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
AntDesignVue2之a-table中key不唯一问题处理的多种方式
文章目录
- AntDesignVue2之a-table中key不唯一问题处理的多种方式
- 1. key不唯一问题
- 1. 问题描述
- 2. 解决方法
- 1. 带冒号的rowKey
- 2 . 带冒号的rowKey绑定表达式
- 3. 不带冒号的rowKey属性
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不需要冒号-->
这篇关于AntDesignVue之a-table中key不唯一问题处理的多种方式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!