【Ant-Desgin-React 穿梭框】表格穿梭框，树穿梭框逻辑代码(只能包含不含子类的子类)

符韬OvO

已于 2024-04-25 13:22:54 修改

阅读量849

点赞数 7

CC 4.0 BY-SA版权

分类专栏：其他 React | 前端框架文章标签： react.js javascript 前端

于 2024-04-24 15:37:39 首次发布

本文链接：https://blog.csdn.net/Dongfang_project/article/details/138156666

博客围绕React的穿梭框组件展开，介绍了树穿梭框组件的默认用法、改良情况及存在的Bug，如添加初始值后无法移到左边、搜索子项全选父类子类跟随添加等，还提及了表格穿梭框组件，属于前端开发内容。

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

高级用法-树穿梭框组件

默认用法

右侧并不是树组件,只是一个单纯的目标源 Id 数组

/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
import React, {
   
    useState } from 'react';
import {
   
    theme, Transfer, Tree } from 'antd';
// Customize Table Transfer
const isChecked = (selectedKeys, eventKey) => selectedKeys.includes(eventKey);
const generateTree = (treeNodes = [], checkedKeys = []) =>
  treeNodes.map(({
    
     children, ...props }) => ({
   
   
    ...props,
    disabled: checkedKeys.includes(props.key),
    children: generateTree(children, checkedKeys),
  }));
const TreeTransfer = ({
    
     dataSource, targetKeys = [], ...restProps }) => {
   
   
  const {
   
    token } = theme.useToken();
  const transferDataSource = [];
  function flatten(list = []) {
   
   
    list.forEach((item) => {
   
   
      transferDataSource.push(item);
      flatten(item.children);
    });
  }
  flatten(dataSource);
  return (
    <Transfer
      {
   
   ...restProps}
      targetKeys={
   
   targetKeys}
      dataSource={
   
   transferDataSource}
      className="tree-transfer"
      render={
   
   (item) => item.title}
      showSelectAll={
   
   false}
    >
      {
   
   ({
    
     direction, onItemSelect, selectedKeys }) => {
   
   
        if (direction === 'left') {
   
   
          const checkedKeys = [...selectedKeys, ...targetKeys];
          return (
            <div
              style={
   
   {
   
   
                padding: token.paddingXS,
              }}
            >
              <Tree
                blockNode
                checkable
                defaultExpandAll
                checkedKeys={
   
   checkedKeys}
                treeData={
   
   generateTree(dataSource, targetKeys)}
                onCheck={
   
   (_, {
    
     node: {
    
     key } }) => {
   
   
                  onItemSelect(key, !isChecked(checkedKeys, key));
                }}
                onSelect={
   
   (_, {
    
     node: {
    
     key } }) => {
   
   
                  onItemSelect(key, !isChecked(checkedKeys, key));
                }}
              />
            </div>
          );
        }
      }}
    </Transfer>
  );
};
const treeData = [
  {
   
   
    key: '0-0',
    title: '0-0',
  },
  {
   
   
    key: '0-1',
    title: '0-1',
    children: [
      {
   
   
        key: '0-1-0',
        title: '0-1-0',
      },
      {
   
   
        key: '0-1-1',
        title: '0-1-1',
      },
    ],
  },
  {
   
   
    key: '0-2',
    title: '0-2',
  },
  {
   
   
    key: '0-3',
    title: '0-3',
  },
  {
   
   
    key: '0-4',
    title: '0-4',
  },
];
const NewTransfer = () => {
   
   
  const [targetKeys, setTargetKeys] = useState([]);
  const onChange = (keys) => {
   
   
    setTargetKeys(keys);
  };
  return <TreeTransfer dataSource={
   
   treeData} targetKeys={
   
   targetKeys} onChange={
   
   onChange} />;
};
export default NewTransfer;

在这里插入图片描述

改良后

TreeTransfer.jsx 树穿梭框组件

/* eslint-disable no-undef */
/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
import React, {
   
    useState } from 'react'
import {
   
    Transfer, Tree } from 'antd'

const UserTransfer = () => {
   
   
  const [targetKeys, setTargetKeys] = useState([])
  const [rightTreeData, setRightTreeData] = useState([])
  const treeData = [
    {
   
   
      key: '0-0',
      title: '0-0'
    },
    {
   
   
      key: '0-1',
      title: '0-1',
      children: [
        {
   
   
          key: '0-1-0',
          title: '0-1-0'
        },
        {
   
   
          key: '0-1-1',
          title: '0-1-1'
        }
      ]
    },
    {
   
   
      key: '0-2',
      title: '0-2'
    },
    {
   
   </