【React】Ant Design穿梭框Target栏的显示以及禁用问题

最新推荐文章于 2025-03-28 18:08:55 发布

原创最新推荐文章于 2025-03-28 18:08:55 发布 · 6.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react #穿梭框 #ant design

react 专栏收录该内容

1 篇文章

订阅专栏

本文围绕Ant Design穿梭框使用展开，介绍了两个常见问题及解决办法。一是穿梭框右侧Target栏不显示，原因是初始化后的targetKeys数组在左侧无对应源数据，解决办法是确保dataSource中有targetKeys的数据源；二是target栏部分禁用，只需修改dataSource中对应数据的“disabled”属性为true。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ant Design 穿梭框官方文档：https://ant.design/components/transfer-cn/

在使用的过程中我遇到了两个小问题，其实知道原因和解决方法之后真的觉得是特别特别简单的问题。

1.穿梭框右侧Target栏不显示的问题。

问题具体描述：对 targetKeys（显示在右侧框数据的key集合）进行初始化后，右侧框内数据不显示。
原因：初始化后的 targetKeys 数组在左侧没有源数据。

也就是说假设左边的 dataSource （数据源数组）为：

[
	{Title:’A’,key:’1’},
	{Title:’B’,key:’2’},
	{Title:’C’,key:’3’}
]

右边的 targetKeys 数组为

[5,6,7]

targetKeys[]中的key值在dataSource []中没有对应的数据源，所以无法显示。

解决办法：在 dataSource [] 中确保要有targetKeys[] 的数据源。

2.target栏部分禁用问题。
效果如图：
在这里插入图片描述
其实很简单只需要在dataSource [] 数组中将对应数据"disabled"属性修改为true，如：

//dataSource []
[
	{Title:’A’,key:’1’,disabled:true},
	{Title:’B’,key:’2’,disabled:false},
	{Title:’C’,key:’3’,disabled:true}
]

//targetKeys[]
[1,2]  
//结果：target一栏中显示"A" "B",A为不可修改，B为可修改