antd树形控件拖拽 改变数据位置

最新推荐文章于 2023-07-28 15:55:21 发布
最新推荐文章于 2023-07-28 15:55:21 发布
阅读量525 收藏 2
点赞数 1
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64883736/article/details/125411113
版权

 首先在antd中你首先看到的不是数据 会看到这样一段代码

 

 不要慌 我们把这段代码在浏览器上运行一下

 没错 这人在炫技 非要生成数据 就写这堆数据会死吗 忽悠我这个菜鸟很好玩吗

接下来 找到你的tree 加上这两个方法 再打印一下

 

 

 dragNode 拿到的拖拽的元素 node是拖拽到的元素 现在你应该知道怎么操作了吧

云布
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Ant Design of Vue a-tree 拖拽事件 drop
A_lin的杂货铺
10-02 1778
此文章对drop事件回调参数做进一步说明，帮助理解a-tree的拖拽功能。
令人头秃的树形表格自由拖拽实现（vue+ant+Sortable）
weixin_43951323的博客
10-26 2364
最近项目提出目标，须实现树状表格自由拖拽，并可支持antdesign（elementui）一类ui框架表格部分功能，紧张的项目周期让人心情久久难以平复，这是连百度的回答都难以让我释怀的痛。没法自己撸呗，代码核心难点在于拖拽后需同步数据结构及同步表格视图。献祭无数根头发后，终成目标。实现效果如下（额外功能可根据antdesign配置属性自行添加）: 代码如下 ： <template> <div> <a-table v-if="tableShow"
Ant Design Vue 树形控件Tree实现拖拽功能
qq_44136882的博客
05-25 3941
Ant Design Vue 树形控件Tree实现拖拽功能
antd table 排序如何使用_【React】antd Table组件实现树形数据拖拽排序
weixin_34538771的博客
01-14 1798
查看antd官网的拖拽排序示例，实践的时候用了下树形结构数据，但是发现列表展开后拖拽排序完全错乱，各位大佬有什么好的解决方法吗import { Table } from 'antd';import { DndProvider, DragSource, DropTarget } from 'react-dnd';import HTML5Backend from 'react-dnd-html5-ba...
antd tree 拖拽 功能
三季雨
01-12 931
同级拖拽，不能不同父级的进行拖拽。
react-antd table树形数据默认展开行实现jsx文件
12-18
react-antd table树形数据默认展开行实现jsx文件
基于Vue实现可以拖拽的树形表格实例详解
10-17
因业务需求，需要一个树形表格，并且支持拖拽排序，任意未知插入，github搜了下，真不到合适的，大部分树形表格都没有拖拽功能，所以决定自己实现一个。这里分享一下实现过程,需要的朋友可以参考下
解决ant design vue中树形控件defaultExpandAll设置无效的问题
01-18
页面步骤： 1.设置a-tree标签 2.默认的treeNodes值设置为空...如果你想异步获取数据后展开全部结点，可以使用非受控方式： https://codepen.io/lovefemi/pen/MMmRvx 补充知识：Ant Design 中Tree踩坑 Tree中的api属性
右击树形控件实现节点动态添加删除修改（VC 6.0实现）
08-01
本小程序能实现右击树形控件实现节点动态添加删除修改，希望对vc初学者有帮助！（VC 6.0实现）
antd design table更改某行数据的样式操作
01-18
antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string–>返回类型是String类型。 例子： import styless from ‘./component/record.css’;—>引入css样式。 css: .csbsTypes{ font...
React+antd Tree树状拖拽排序
读心悦
06-22 1350
关于Tree组件的拖拽效果，官方案例给的是拖拽将节点插入其他节点内或者是前后。 现在想实现效果是：所有的父节点可以拖拽排序，但不能插入子节点队列中；同样子节点也不能拖拽到父节点队列中，只能在子节点队列内拖拽排序。...
ant tree拖动排序 实现同级拖动 和 跨级拖动
我是vip你是谁的博客
04-10 4333
ant tree拖动排序 实现同级拖动 和 跨级拖动
antd - 实现拖拽功能
qq_24917475的博客
06-05 7420
最近开发，需要实现一个新功能：拖拽卡片到另一位置 // 需要拖拽的Card <Card draggable={true} onDragStart={(e) => this.handleDragStart(e) > {contents} </Card> // 可放置的位置 <Button block onDrop={e => this.handleDrop(e) onDrapOver={e => this.handleDrop(e)} >
Antd 树拖拽一些细节，官网没有，摸坑篇
weixin_42357617的博客
09-22 3960
主要是记录一下Antd拖拽树的一些重要参数和分类讨论 给到启示的文章有：关于 antd tree 组件的推拽操作 1、考虑一个问题，这个树功能足够多的时候会很复杂，建议抽出作为一个组件使用、 2、如果blockNode还是没用，只能点击文字生效，那就最好考虑是不是css里面控制一下span的长度 该文件是建立在dva初始化界面的，很简单操作 import React from 'react'; import { connect } from 'dva'; import styles from './Inde
antd-tree增删改拖拽操作(五)
qq_41969287的博客
04-23 2670
一、src/pages/postman/CI.vue文件 <template> <div > <a-row :gutter="1"> <a-col :span="6"> <a-card style="width: 100%"> <a-input-search v-model="searchValue" style="margin-bottom: 4px" placeholder="服
advTree的拖拽和禁用操作
谷棵的专栏
01-18 506
advTree的拖拽和禁用操作 默认情况下advTree启用了自动可以自身层级互相拖拽 1此时如果想完全禁止拖拽只需要把advTree.DragDropEnable=false;即可 2.此时需要只是禁止advTree自身的拖拽 ，不影响它把数据拖向其他控件需要在事件 advTree_BeforeNodeDrop里面进行控制代码如下： private void advTree_BeforeNodeDrop(object sender, TreeDragDropEventArg...
树形控件的处理和拖拽
weixin_59202948的博客
09-22 386
【代码】树形控件的处理和拖拽。
antd vue tree的增删改和拖拽
reembarkation的博客
07-28 485
antd vue tree的增删改和拖拽。
antDesign设置树和机构的组合
duancsdn的博客
12-01 514
title=“流程发送”title=“流程发送”okText=“发送”okText=“发送”
antd树形控件的增删改查
最新发布
11-12
以下是Antd树形控件的增删改查的示例代码： 1. 渲染树形控件 ```jsx import React, { useState } from 'react'; import { Tree, Button, Modal, Form, Input } from 'antd'; const { TreeNode } = Tree; const Demo = () => { const [form] = Form.useForm(); const [treeData, setTreeData] = useState([ { title: 'Node1', key: '0-0', children: [ { title: 'Child Node1', key: '0-0-0', }, { title: 'Child Node2', key: '0-0-1', }, ], }, { title: 'Node2', key: '0-1', }, ]); const [visible, setVisible] = useState(false); const [selectedNode, setSelectedNode] = useState(null); const handleAdd = () => { setVisible(true); }; const handleOk = () => { form.validateFields().then((values) => { const newNode = { title: values.nodeName, key: `${selectedNode.key}-${selectedNode.children.length}`, }; setSelectedNode((prev) => { prev.children.push(newNode); return { ...prev }; }); setVisible(false); form.resetFields(); }); }; const handleCancel = () => { setVisible(false); form.resetFields(); }; const handleSelect = (selectedKeys, info) => { setSelectedNode(info.node); }; const handleDelete = () => { setSelectedNode((prev) => { const parentKey = prev.key.split('-').slice(0, -1).join('-'); const newChildren = treeData.find((node) => node.key === parentKey).children.filter((node) => node.key !== prev.key); const newTreeData = treeData.map((node) => { if (node.key === parentKey) { return { ...node, children: newChildren }; } return node; }); setTreeData(newTreeData); return null; }); }; const handleEdit = () => { setVisible(true); form.setFieldsValue({ nodeName: selectedNode.title }); }; return ( <> <Button onClick={handleAdd}>Add Node</Button> <Button onClick={handleDelete} disabled={!selectedNode}> Delete Node </Button> <Button onClick={handleEdit} disabled={!selectedNode}> Edit Node </Button> <Tree onSelect={handleSelect} treeData={treeData}> {renderTreeNodes(treeData)} </Tree> <Modal visible={visible} onOk={handleOk} onCancel={handleCancel}> <Form form={form}> <Form.Item name="nodeName" label="Node Name" rules={[{ required: true }]}> <Input /> </Form.Item> </Form> </Modal> </> ); }; const renderTreeNodes = (data) => data.map((item) => { if (item.children) { return ( <TreeNode title={item.title} key={item.key} dataRef={item}> {renderTreeNodes(item.children)} </TreeNode> ); } return <TreeNode {...item} />; }); export default Demo; ``` 2. 添加节点 ```jsx const handleAdd = () => { setVisible(true); }; const handleOk = () => { form.validateFields().then((values) => { const newNode = { title: values.nodeName, key: `${selectedNode.key}-${selectedNode.children.length}`, }; setSelectedNode((prev) => { prev.children.push(newNode); return { ...prev }; }); setVisible(false); form.resetFields(); }); }; const handleCancel = () => { setVisible(false); form.resetFields(); }; ``` 3. 删除节点 ```jsx const handleDelete = () => { setSelectedNode((prev) => { const parentKey = prev.key.split('-').slice(0, -1).join('-'); const newChildren = treeData.find((node) => node.key === parentKey).children.filter((node) => node.key !== prev.key); const newTreeData = treeData.map((node) => { if (node.key === parentKey) { return { ...node, children: newChildren }; } return node; }); setTreeData(newTreeData); return null; }); }; ``` 4. 编辑节点 ```jsx const handleEdit = () => { setVisible(true); form.setFieldsValue({ nodeName: selectedNode.title }); }; <Modal visible={visible} onOk={handleOk} onCancel={handleCancel}> <Form form={form}> <Form.Item name="nodeName" label="Node Name" rules={[{ required: true }]}> <Input /> </Form.Item> </Form> </Modal> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值