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为可修改