ant Design穿梭框Transfer采坑笔记
作者:互联网
最近有个需求需要使用穿梭框功能,看着antd都有现成组件,就毫不犹豫开发起来,结果采坑绕了一大圈才实现了想要的业务逻辑。
先来看看官方的demo:
官网链接直达:https://ant.design/components/transfer-cn/
根据官方的基本用法,代码如下:
<Transfer
dataSource={mockData}
titles={['Source', 'Target']}
targetKeys={targetKeys}
selectedKeys={selectedKeys}
onChange={onChange}
onSelectChange={onSelectChange}
onScroll={onScroll}
render={item => item.title}
/>
- dataSource:代表所有数据
- targetKeys:代表选中数据的key值
- render:代表每行的渲染函数
- onChange onSelectChange onScroll:代表各类回调函数
这里要着重强调下,不要以为Transfer左右两边的数据是分别查询的,他们的数据都是通过维护一个dataSource实现的。系统默认左边为未选择的数据,右边为选择的数据,选择的数据通过targetKeys来实现。targetKeys是一个数组,选择的数据先后顺序跟这个targetKeys数据的先后顺序有关。
之前以为两边的处理是分开的,所以给每个数据加了if_select的属性来做选择状态的判断,后面试了下targetKeys,居然把我想要实现的选择,排序等功能都实现了,才恍然大悟。
const onChange = (nextTargetKeys, direction, moveKeys) => {
console.log('nextTargetKeys', nextTargetKeys, direction, moveKeys);
// const list = _.cloneDeep(channel_list);
if (direction === 'left') {
// for (let i = 0; i < list.length; i += 1) {
// if (!nextTargetKeys.includes(list[i].key)) {
// list[i].if_select = false;
// }
// }
setTargetKeys(nextTargetKeys);
} else if (direction === 'right') {
// for (let i = 0; i < list.length; i += 1) {
// if (nextTargetKeys.includes(list[i].key)) {
// list[i].if_select = true;
// }
// }
setTargetKeys([...target_keys, nextTargetKeys[0]]);
}
// setChannelList([...list]);
};
以下是我实现的功能
dataSource数据源:
const res = [
{
key: '00',
title: '我的关注',
description: '我的关注',
},
{
key: '11',
title: '推荐',
description: '推荐',
},
{
key: '22',
title: '游戏',
description: '游戏',
},
{
key: '33',
title: '少儿',
description: '少儿',
},
];
来看看效果
实现这样的效果,只需对targetKeys这样设置就行
targetKeys = ["11","22"]
标签:采坑,title,Transfer,list,nextTargetKeys,ant,key,targetKeys,onChange 来源: https://blog.csdn.net/ssza02/article/details/120123934