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

最新推荐文章于 2024-07-24 09:36:01 发布

原创

最新推荐文章于 2024-07-24 09:36:01 发布 · 6.4k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#js #react #javascript #ant

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

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

最低0.47元/天解锁文章