antd为Tree组件标题附加操作按钮功能

目录
  • 一、前言
  • 二、实现方案
  • 三、总结

一、前言

使用antd的tree组件实现下面这样的模块树，点击标题请求其下列表的数据，点击标题旁边的操作图标则执行对应的增删改功能：

二、实现方案

1.封装一个设置树标题的方法，通过开关改变state来控制图标按钮是否可见： 

处理树数据（name、children）

  const setTree = (module_data: any) => {
    return module_data.map((item: any) => {
      let _json = { ...item };
      _json.name = setTreeTitle(item);
      _json.children = item.children ? setTree(item.children) : [];
      return _json;
    });
  };

赋值给Tree的treeData：

<Tree
   		...
        treeData={setTree(treeData)}
        ...
        fieldNames={{ title: 'name', key: 'id', children: 'children' }}
      />

2.树标题被选中时，则调用刷新列表的方法:

onSelect={(value: any, e: any) => {
      if (e.selected) {
        treeSelectFunc(value[0]);
      }
    }}

3.但需要注意的坑是，由于我增加了删除功能，当执行删除操作后，树处于选中状态的话就会报错，因为处于选中状态就会调用刷新列表的方法，但该数据已经被我删除了，可能因此报错： 

所以我们需要创建一个state来存储当前选中的数据：

const [selectId, setSelectId] = useState<any>(null);

然后在onSelect方法中判断新选中的数据是否是当前数据，如果是则不再执行请求方法：

onSelect={(value: any, e: any) => {
  const selectValue = value[0]
  if (e.selected && selectValue !== selectId) {
    treeSelectFunc(selectValue);
    setSelectId(selectValue)
  }
}}

这样就解决了删除数据可能报错的问题。

三、总结

到此这篇关于antd为Tree组件标题附加操作按钮功能的文章就介绍到这了,更多相关antd为Tree组件按钮功能内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 关于antd tree 和父子组件之间的传值问题(react 总结)

    关于antd tree 和父子组件之间的传值问题(react 总结)

    项目需求:点击产品树节点时获取该节点的所有父节点,同时回填表格的搜索条件,完成搜索功能,搜索结果展示在下方的table中. 写了三个组件: 现在有个业务场景交互:在orderTree组件中点击树节点,获取当前节点以及所有的父节点的Id 放入一个对象arrKeys中,并在orderForm组件中使用(回填类型下拉选择框,objId对象作为查询接口的入参) 现在可以分部解决问题: 1.首先获取点击的树节点以及所有父节点的id ---arrKeys 2.在点击树节点获取当前节点以及所有父级节点之后,通

  • antd为Tree组件标题附加操作按钮功能

    antd为Tree组件标题附加操作按钮功能

    目录 一.前言 二.实现方案 三.总结 一.前言 使用antd的tree组件实现下面这样的模块树,点击标题请求其下列表的数据,点击标题旁边的操作图标则执行对应的增删改功能: 二.实现方案 1.封装一个设置树标题的方法,通过开关改变state来控制图标按钮是否可见:  处理树数据(name.children) const setTree = (module_data: any) => { return module_data.map((item: any) => { let _json = {

  • Tree 组件搜索过滤功能实现干货

    Tree 组件搜索过滤功能实现干货

    目录 1 Tree 组件搜索过滤功能简介 2 组件交互逻辑分析 2.1 对于匹配节点的标识如何呈现? 2.2 用户如何调用 tree 组件的搜索过滤功能? 2.3 对于匹配的节点其父节点及兄弟节点如何获取及处理? 3 实现原理和步骤 3.1 第一步:需要熟悉 tree 组件整个代码及逻辑组织方式 3.2 第二步:需要熟悉 tree 组件整个nodes数据结构是怎样的 3.3 第三步: 处理匹配节点及其父节点的展开属性 3.4 第四步: 如果是过滤功能时,需要将未匹配到的节点进行隐藏 3.5 第五

  • layui.tree组件的使用以及搜索节点功能的实现

    由于项目树形节点比较多需要增加节点搜索功能,所以研究了一下加上社区伙伴的支持,目前功能可以简单实现但细节还需要修改,添加上了组件的基本使用方法和属性,现在分享出来~ HTML: <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" type="button" lay-demo="getChecked">获取选中节

  • 详解对于React结合Antd的Form组件实现登录功能

    一.React 结合 Antd 实现登录功能 引入所需的 Antd 组件,代码如下所示: import { Form, Icon, Input, Button, message } from 'antd' 在 Login.jsx 中,创建一个 Login 组件.当对外暴露组件时,需要使用 Form 组件进行包装,包装 Form 组件生成一个新的组件 Form(Login),同时新组件会向 Form 组件传递一个强大的对象属性 form,这样就可以取到 Form 表单的值,这也是高阶组件和高阶函数

  • 如何实现vue的tree组件

    如何实现vue的tree组件

    前言 Tree一直是大家熟知的组件,做一些大型的后台管理系统都会用到.使用树组件可以完整的展现其中的层级关系,并具有展开收起选择等交互功能. 效果 节点可以无限的递归延伸 可以展开和收起子节点 如果子节点全部选择对应的父节点也应该选中,反之父节点取消选中对应子节点也需要取消选中 API prop传递data属性,来描述所有的节点的信息 每个节点的配置描述如下 title: 展示的标题 expand 是否展开节点 checked 是否选中节点 children 子节点 以及还有两个event on

  • React实践之Tree组件的使用方法

    React实践之Tree组件的使用方法

    本文介绍了React实践之Tree组件,分享给大家,具体如下: 实现功能 渲染数据 展开合并 使用 数据结构: const node = { title: '00000', key: '0' , level:'level1', open: true, child:[ { title: '0-111111', key: '0-0', level:'level2', open: true, child:[ { title: '0-1-1111', key: '0-0-0', level:'level

  • 微信小程序自定义组件实现tabs选项卡功能

    本文为大家分享了微信小程序实现tabs选项卡功能的具体代码,供大家参考,具体内容如下 一个自定义组件由 json wxml wxss js 4个文件组成.要编写一个自定义组件,首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true 可这一组文件设为自定义组件) components/navigator/index.json { "component": true } components/navigator/index.wxml <!-- 自定

  • Element-ui tree组件自定义节点使用方法代码详解

    工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~ <template> <div class="sortDiv"> <el-tree :data="sortData" draggable node-key="id" ref="sortTree" default-expand-all :expand-

  • 基于element-ui封装可搜索的懒加载tree组件的实现

    引言 最近开发项目时遇到一个需求就是采用tree的方式展示以万为单位的数据,因为数据量大第一反应就是采用"懒加载"的方式实现,为了方便用户在庞大的数据量中快速定位到某个节点搜索功能也是必不可少的:因为采用"懒加载"数据,搜索当然也是远程搜索了:确定了需求当然第一时间就去网上找有没有小伙伴已经实现了相关组件,最后....,还是自己实现一个吧(由于公司采用的element-ui所以基于el-tree进行改造):[这只是自己实现的一种思路,希望大家多多指正] 1.懒加载树

  • ant design的table组件实现全选功能以及自定义分页

    我就废话不多说了,大家还是直接看代码吧~ ant design的table组件实现全选功能以及自定义分页 直接附上全部代码以及截图了 import './index.scss'; import React from 'react'; import {Checkbox, Table, Popconfirm} from 'antd'; class TestComponent extends Component { constructor (props) { super(props); this.st

随机推荐