树形穿梭框的代码实现

效果如下图

代码来一波

• js

import React, {
    Component } from 'react';
import {
   
  Tree,
  Checkbox,
  Button,
  Input,
  Icon
} from 'antd'

import styles from "./TreeSelectTransfer.less"

const {
    TreeNode } = Tree;

const splitSymbol = "-";

const dataAddKey = (data) => {
   
  return data.map((item, index) => {
   
    item.key = index + "";
    item.children = item.children.map((childItem, childIndex) => {
   
      let nowKey = `${
     index}${
     splitSymbol}${
     childIndex}`;
      childItem.key = nowKey;
      return childItem;
    })
    return item;
  })
}

const getLeftAndRightKey = (data, rightDataKey = {
   }) => {
   
  let len = data.length;
  let leftData = new Array(len).fill("").map(() => {
   
    return {
    children: [] }
  });
  let rightData = new Array(len).fill("").map(() => {
   
    return {
    children: [] }
  });
  let leftTotalCount = 0;
  let rightTotalCount = 0;
  data.map((item, index) => {
   
    item.children.map((childItem, childIndex) => {
   
      let nowKey = `${
     index}${
     splitSymbol}${
     childIndex}`;
      if(nowKey in rightDataKey) {
   
        rightData[index].name = item.name;
        rightData[index].key = index + "";
        rightData[index].children.push(childItem);
        rightTotalCount += 1;
      } else {
   
        leftTotalCount += 1;
        leftData[index].name = item.name;
        leftData[index].key = index + "";
        leftData[index].children.push(childItem);
      }

    })
  });
  leftData = leftData.filter(item => {
   
    return item.children.length
  })
  rightData = rightData.filter(item => {
   
    return item.children.length
  })
  return {
   
    leftData,
    rightData,
    leftTotalCount,
    rightTotalCount
  }
}

const filterData = (data, filterValue) => {
   
  let filterTrimV = filterValue.trim();
  if(!filterTrimV) {
   
    return data;
  }
  data = data.filter(item => {
   
    if(item.name.includes(filterTrimV)) {
   
      return true;
    } else if(item.children && item.children.length) {
   
      item.children = item.children.filter(childItem => {
   
        if(childItem.name.includes(filterTrimV)) {
   
          return true;
        } else {
   
          return false;
        }
      });
      return item.children.length > 0
    }
    return true;
  })
  return data;
}

class TreeSelectTransfer extends Component {
   
  constructor