react antd树穿梭框(下)

最新推荐文章于 2025-04-15 09:42:57 发布

请叫我斌儿

最新推荐文章于 2025-04-15 09:42:57 发布

阅读量2.2k

点赞数

分类专栏：程序猿文章标签： react js javascript

本文链接：https://blog.youkuaiyun.com/weixin_45763194/article/details/115077697

版权

本文是React Antd树穿梭框系列的下篇，主要介绍如何实现选中项追加到右侧树结构，以及删除右侧树的节点。内容基于上篇，通过模拟数据来演示操作过程。

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

相对上篇改动不大,实现选中追加,删除右边树结构,模拟数据在可以看上篇

树穿梭框上篇

import React, {
    Component } from 'react';
import {
    Tree, Input, Button,Card  } from 'antd';
// import requset from '@/utils/request';
import {
    cloneDeep } from 'lodash';
const {
    Search } = Input;
//扁平后数据
let arr = [];
//右边扁平后数据
let arrRightKey = [];
class TransferTree extends Component {
   
    constructor(props) {
   
        super(props);
        this.state = {
   
            treeData: [],
            expandedKeys: [],
            searchValue: '',
            autoExpandParent: true,
            loading: false,
            rightTree: DATAR,
            rightTreeCopy: [],
            checkedKeysLeft: [],
            leftBtnDisabled: true,
            rightBtnDisabled: true
        };
    }

    componentDidMount() {
   
        //请求树结构
        //如果没有给父节点key,那就给每个子节点设置父节点key
        const newDATA = cloneDeep(DATA);
        const newDATAR = cloneDeep(DATAR);
        this.setParent(newDATA);
        // console.log(DATA);
        //扁平数据
        this.setnode(newDATA);
        //扁平数据
        this.setnodeR(newDATAR);
        console.log(arr, arrRightKey);
    }

    //1设置父节点id
    setParent = treeData => {
   
        treeData.map(t => {
   
            if (t.children && t.children.length) {
   
                t.children.map(c => {
   
                    c.parentKey = t.key;
                });
                this.setParent(t.children);
            } else {
   
                return;
            }
        });
    };
    //2扁平数据
    setnode = c => {
   
        c.map(item => {
   
            arr.push(item);
            item.children && this.setnode(item.children);
        });
    };
    //2扁平数据
    setnodeR = c => {
   
        c.map(item => {
   
            arrRightKey.push(item.key);
            item.children

最低0.47元/天解锁文章