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-benchmark并发压力测试的问题解析,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
Redis中ServiceStack.Redis和StackExchange.Redis区别详解
本文主要介绍了Redis中ServiceStack.Redis和StackExchange.Redis区别详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
Redis 分片集群是一种将 Redis数据库分散到多个节点上的方式,以提供更高的性能和可伸缩性,本文主要介绍了Redis分片集群的实现,具有一定的参考价值,感兴趣的可以了解一下2025-04-04
本文主要介绍了Redis BigKey的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
今天小编就为大家分享一篇redis中修改配置文件中的端口号 密码方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-05-05
本文主要介绍了Redis分布式锁的实现方式，分布式锁是 满足分布式系统或集群模式下多进程可见并且互斥的锁。感兴趣的同学可以参考阅读2023-04-04
本文主要介绍了Redis高并发情况下并发扣减库存项目实战，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要介绍了使用redis实现附近的人,实现诸如附近的人这类依赖于地理位置信息的功能，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2021-09-09
这篇文章主要介绍了Redis的性能,作者通过Visual Studio上的C#程序对其进行了分析,需要的朋友可以参考下2015-06-06
这篇文章主要为大家详细的介绍了Redis高效的原因以及分析了Redis高效的数据结构，有需要的朋友可以借鉴参考下，希望能够有所帮助2021-09-09
最新评论