qiao22 / EditTree

基于react-antd可编辑和拖拽的tree,类似element ui

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

This project was bootstrapped with Create React App. 主要使用react+antd

Available Scripts

In the project directory, you can run:

yarn start或者npm start启动

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

需求列表

只有一个根目录

else if ( (info.dropToGap && info.dropPosition == -1 && dropKey == '0-1' && dropPosition == -1) || (!info.dropToGap && info.dropPosition == 0 && dropKey == '0-1' && dropPosition == 0) // (info.dropToGap && info.dropPosition == -1 && dropPosition == -1) || // (!info.dropToGap && info.dropPosition == 0 && dropPosition == 0) ) { //不允许拖到根节点外部 loop(data, dropKey, item => { item.children = item.children || []; // where to insert 示例添加到头部,可以是随意位置 item.children.unshift(dragObj); }); }

可以增删改查和拖拽

可以新增同级和子集,父级暂未实现

预览

images 循环条件需要进一步优化

About

基于react-antd可编辑和拖拽的tree,类似element ui


Languages

Language:JavaScript 95.1%Language:CSS 3.2%Language:HTML 1.7%