antd复杂穿梭框——2022-09-28

需求：根据原型图实现左边为树形，右边为表格的穿梭框。

实现过程：

1.定义组件

const isChecked = (selectedKeys, eventKey) => selectedKeys.includes(eventKey);

const generateTree = (treeNodes = [], checkedKeys = []) =>
  treeNodes.map(({ children, ...props }) => ({
    ...props,
    disabled: checkedKeys.includes(props.id),
    children: generateTree(children, checkedKeys),
  }));

const TreeTableTransfer = ({ rightColumns, dataSource, targetKeys, ...restProps }) => {
  console.log({ ...restProps }, 999);
  const transferDataSource = [];
  function flatten(list = []) {
    list.forEach((item) => {
      transferDataSource.push(item);
      flatten(item.children);
    });
  }
  flatten(dataSource);
  return (
    <Transfer
      rowKey={(record) => record.id}
      showSearch
      {...restProps}
      targetKeys={targetKeys}
      dataSource={transferDataSource}
      className="tree-transfer"
      render={(item) => item.name}
      showSelectAll={false}
    >
      {({ direction, filteredItems, onItemSelect, selectedKeys }) => {
        if (direction === 'left') {
          const checkedKeys = [...selectedKeys, ...targetKeys];
          return (
            <Tree
              blockNode
              checkable
              checkStrictly
              defaultExpandAll
              checkedKeys={checkedKeys}
              fieldNames={{ title: 'name', key: 'id' }}
              treeData={generateTree(dataSource, targetKeys)}
              // onCheck={(_, { node: { key } }) => {
              //   onItemSelect(key, !isChecked(checkedKeys, key));
              // }}
              // onSelect={(_, { node: { key } }) => {
              //   onItemSelect(key, !isChecked(checkedKeys, key));
              // }}
              onCheck={(_, { node: { id } }) => {
                onItemSelect(id, !isChecked(checkedKeys, id));
              }}
              onSelect={(_, { node: { id } }) => {
                onItemSelect(id, !isChecked(checkedKeys, id));
              }}
            />
          );
        } else {
          const columns = rightColumns;
          const rowSelection = {
            onSelect({ key }, selected) {
              onItemSelect(key, selected);
            },

            // selectedRowKeys: listSelectedKeys,
          };
          return (
            <Table
              rowSelection={rowSelection}
              columns={columns}
              dataSource={filteredItems}
              size="small"
              // style={{
              //   pointerEvents: listDisabled ? 'none' : undefined,
              // }}
              // onRow={({ key, disabled: itemDisabled }) => ({
              //   onClick: () => {
              //     if (itemDisabled || listDisabled) return;
              //     onItemSelect(key, !listSelectedKeys.includes(key));
              //   },
              // })}
            />
          );
        }
      }}
    </Transfer>
  );
};

2.使用组件

const UserTable = () => {
 
  const rightTableColumns = [
    {
      title: '用户姓名',
      dataIndex: 'name',
    },
    {
      title: '参与团队',
      dataIndex: 'team',
    },
  ];
  const [targetKeys, setTargetKeys] = useState([]);
  const onChange = (keys) => {
    setTargetKeys(keys);
  };

  return (
    <>     
      <TreeTableTransfer
      rightColumns={rightTableColumns}
      dataSource={positionTree}
      targetKeys={targetKeys}
      onChange={onChange}
      />
    </>
  );
};

3.实现效果

 

该需求实现仅能够展示并点击，还有许多细小的功能待完善！：）