react+antd穿梭框

背景: antd的穿梭框组件,不支持联级选中.因为tree组件有checkStrictly属性,但是业务需要,树形结构需要添加管理. 如果仅仅打开checkStrictly属性,则会出现父级选中,子级无法关闭的情况。

解决方案:加上中间层 Keys,当点击树结构时,每次的回调函数返回的是一维数组,保存一维数组,再关闭赋值,代码如下:

 onCheck={(checked: any) => {
    const newCheck = checked?.filter((item) => typeof item === 'number');//过滤出结构
    onItemSelectAll(keys as string[], false); //清除上次选中key
    setKeys(newCheck as string[]);  //写入这次选择key
    onItemSelectAll(newCheck as string[], true);  //为这次选择的key赋值
   }}

因为onCheck的参数是当前选择的所有节点,但是onItemSelectAll函数只能关闭或增加节点,所以当父子级关联时,仅仅把check的函数参数传给onItemSelectAll,无法对应.通过增加中间层,这一步节省了大量的计算,一般的方案是每次修改check,通过计算,依次遍历,直到遍历完所有父节点,然后去对应的删除或增加.另外要注意的是回显问题,关注targetKeys和transferDataSource,不需要过多的写方法去干涉树结构,只需要通过数据渲染就可以了。