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中键和数据库通用指令基本操作详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要给大家介绍了关于Redis分布式锁的使用和实现原理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
这篇文章主要介绍了window环境redis通过AOF恢复数据的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
本文主要介绍了Redis消息队列的三种实现方式,主要包括List实现消息队列,PubSub消息队列,Stream消息队列,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了Redis 出现错误1067的解决办法的相关资料,Redis 错误1067：进程意外终止，Redis不能启动，Redis启动不了，需要的朋友可以参考下2017-07-07
浅谈RedisTemplate和StringRedisTemplate的区别
本文主要介绍了RedisTemplate和StringRedisTemplate的区别及个人见解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了Redis如何实现分布式锁问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要给大家总结介绍了关于Redis连接错误的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-02-02
本文主要介绍了redis序列化及各种序列化情况划分，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要为大家详细介绍了Redis中的BigKey如何发现和处理,文中给大家详细讲解了BigKey危害和如何解决这些问题,文章通过代码示例和图文介绍的非常详细,需要的朋友可以参考下2023-10-10
最新评论