antd为Tree组件标题附加操作按钮功能
更新时间：2022年08月16日 11:45:59 作者：曲鸟
这篇文章主要介绍了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组件按钮功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
Redis底层数据结构之dict、ziplist、quicklist详解
本文给大家详细介绍了Redis的底层数据结构：dict、ziplist、quicklist的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-09-09
这篇文章主要介绍了使用redis如何生成自增序列号码，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-11-11
本文主要介绍了Redis设置key的过期时间，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
Redis拥有丰富的数据结构，拥有事务功能，保证命令的原子性。由于是内存数据库，读写非常高速，可达10w/s的评率，所以一般应用于数据变化快、实时通讯、缓存等。这篇文章给大家讲解一下Python如何使用Redis，并进行相关的实战操作。2022-12-12
这篇文章主要为大家介绍了Caffeine实现类似redis的动态过期时间示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了redis主从连接不成功错误问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教<BR>2024-01-01
这篇文章主要介绍了Redis教程(十五)：C语言连接操作代码实例,本篇博客是该系列博客中的最后一篇,在这里将给出基于Redis客户端组件访问并操作Redis服务器的代码示例,需要的朋友可以参考下2015-05-05
本文主要介绍了Redis模糊查询的几种实现方法,包括两种方法KEYS , SCAN,具有一定的参考价值,感兴趣的可以了解一下2024-02-02
这篇文章主要为大家详细介绍了redis使用watch秒杀抢购的实现思路，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-02-02
本文主要介绍了利用Redis实现订单30分钟自动取消，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
最新评论