antd react拿到树结构选中的数据,树结构多层穿梭框(上)

最新推荐文章于 2025-03-28 18:08:55 发布

请叫我斌儿

最新推荐文章于 2025-03-28 18:08:55 发布

阅读量2.8k

点赞数

文章标签： react javascript

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

版权

本文展示了如何在antd中使用React实现树结构的穿梭框，并获取选中的数据。当前示例仅能将选中项覆盖添加到右侧，后续将探讨如何追加数据。

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

效果大概如下,可以自己拿代码试试,这个现在是只能拿到选中的添加到右边,并且会覆盖右边的数据,再研究下追加到右边,有需要的可以自己再封装成通用组件

树结构穿梭框下篇,可追加数据
在这里插入图片描述

import React, {
    Component } from 'react';
import {
    Tree, Input, Button } from 'antd';
// import requset from '@/utils/request';
import {
    NuCard } from '@cbay/cbay-ui';
import {
    cloneDeep } from 'lodash';
const {
    Search } = Input;
//扁平后数据
let arr = [];
class TransferTree extends Component {
   
    state = {
   
        treeData: [],
        expandedKeys: [],
        searchValue: '',
        autoExpandParent: true,
        loading: false,
        rightTree: [],
        rightTreeCopy: [],
        checkedKeysLeft: [],
        leftBtnDisabled: true,
        rightBtnDisabled: true
    };

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

    //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);
        });
    };

    onSelect = (selectedKeys, info) => {
   
        console.log(info);
        const {
    type, eventKey } = info.node.props;
        this.setState({
   
            selected: {
   
                type,
                id: eventKey
            }
        });
    };

    checked = (checkedkeys, node) => {
   
        const {
    halfCheckedKeys } = node || {
   };
        //设置左边复选框选中的key
        this.setState({
   
            checkedKeysLeft: {
   
                checked: checkedkeys,
                halfChecked: halfCheckedKeys
            }
        });
        //
        let checkedAllLeftKey = checkedkeys.concat(halfCheckedKeys);

        // const rightTreeCopy = this.ListToTree(selectValue);
        const rightTreeCopy = this.ListToTree(checkedAllLeftKey);
        this.setState({
   
            rightTreeCopy,
            checkedAllLeftKey,
            leftBtnDisabled: !checkedkeys.length
        });
        // console.log(rightTreeCopy);
    };

    checkedRight = checkedkeys => {
   
        const {
    checkedAllLeftKey } = this.state;
        let checkAllCopy =</

最低0.47元/天解锁文章