React+Antd通过Tree组件实现可编辑可拖拽节点树

最新推荐文章于 2023-02-08 11:05:44 发布

「已注销」

最新推荐文章于 2023-02-08 11:05:44 发布

阅读量6.4k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： React框架笔记文章标签： js react javascript ant

本文链接：https://blog.youkuaiyun.com/Linux_MK/article/details/108462815

本文介绍了如何在React应用中结合Ant Design的Tree组件，实现节点的编辑与拖拽功能。通过利用JavaScript和Antd库，我们可以创建一个交互性强、用户体验良好的动态树形结构。

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

import React, { useState, useEffect } from 'react';
import { Tree } from 'antd';
import {
  PlusOutlined,
  EditOutlined,
  MinusOutlined,
  CheckOutlined,
  DeleteOutlined,
} from '@ant-design/icons';
import styles from './index.less';
const { TreeNode } = Tree;

const DragTable = () => {
  let data = [
    {
      value: '董事会',
      defaultValue: '董事会',
      key: '0-1',
      parentKey: '0',
      isEditable: false,
      children: [
        {
          value: '小白龙',
          defaultValue: '小白龙',
          key: '0-1-1',
          parentKey: '1-1',
          isEditable: false,
          children: [
            {
              value: '小红',
              defaultValue: '小红',
              key: '0-1-11',
              parentKey: '1-11',
              isEditable: false,
            },
            {
              value: '小绿',
              defaultValue: '小绿',
              key: '0-1-12',
              parentKey: '1-12',
              isEditable: false,
            },
            {
              value: '小青',
              defaultValue: '小青',
              key: '0-1-13',
              parentKey: '1-13',
              isEditable: false,
            },
          ],
        },
      ],
    },
    {
      value: '财务部',
      defaultValue: '财务部',
      key: '0-2',
      parentKey: '1',
      isEditable: false,
      children: [
        {
          value: '小红',
          defaultValue: '小红',
          key: '0-2-1',
          parentKey: '2-1',
          isEditable: false,
        },
        {
          value: '小绿',
          defaultValue: '小绿',
          key: '0-2-2',
          parentKey: '2-2',
          isEditable: false,
        },
        {
          value: '小青',
          defaultValue: '小青',
          key: '0-2-3',
          parentKey: '2-3',
          isEditable: f