antd為Tree組件標(biāo)題附加操作按鈕功能
一、前言
使用antd的tree組件實(shí)現(xiàn)下面這樣的模塊樹，點(diǎn)擊標(biāo)題請(qǐng)求其下列表的數(shù)據(jù)，點(diǎn)擊標(biāo)題旁邊的操作圖標(biāo)則執(zhí)行對(duì)應(yīng)的增刪改功能：
二、實(shí)現(xiàn)方案
1.封裝一個(gè)設(shè)置樹標(biāo)題的方法，通過(guò)開關(guān)改變state來(lái)控制圖標(biāo)按鈕是否可見(jiàn)：
處理樹數(shù)據(jù)（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.樹標(biāo)題被選中時(shí)，則調(diào)用刷新列表的方法:
onSelect={(value: any, e: any) => {
if (e.selected) {
treeSelectFunc(value[0]);
}
}}3.但需要注意的坑是，由于我增加了刪除功能，當(dāng)執(zhí)行刪除操作后，樹處于選中狀態(tài)的話就會(huì)報(bào)錯(cuò)，因?yàn)樘幱谶x中狀態(tài)就會(huì)調(diào)用刷新列表的方法，但該數(shù)據(jù)已經(jīng)被我刪除了，可能因此報(bào)錯(cuò)：
所以我們需要?jiǎng)?chuàng)建一個(gè)state來(lái)存儲(chǔ)當(dāng)前選中的數(shù)據(jù)：
const [selectId, setSelectId] = useState<any>(null);
然后在onSelect方法中判斷新選中的數(shù)據(jù)是否是當(dāng)前數(shù)據(jù)，如果是則不再執(zhí)行請(qǐng)求方法：
onSelect={(value: any, e: any) => {
const selectValue = value[0]
if (e.selected && selectValue !== selectId) {
treeSelectFunc(selectValue);
setSelectId(selectValue)
}
}}這樣就解決了刪除數(shù)據(jù)可能報(bào)錯(cuò)的問(wèn)題。
三、總結(jié)
到此這篇關(guān)于antd為Tree組件標(biāo)題附加操作按鈕功能的文章就介紹到這了,更多相關(guān)antd為Tree組件按鈕功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Redis底層數(shù)據(jù)結(jié)構(gòu)之dict、ziplist、quicklist詳解
本文給大家詳細(xì)介紹了Redis的底層數(shù)據(jù)結(jié)構(gòu)：dict、ziplist、quicklist的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-09-09
這篇文章主要介紹了使用redis如何生成自增序列號(hào)碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
Redis設(shè)置key的過(guò)期時(shí)間
本文主要介紹了Redis設(shè)置key的過(guò)期時(shí)間，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
Redis擁有豐富的數(shù)據(jù)結(jié)構(gòu)，擁有事務(wù)功能，保證命令的原子性。由于是內(nèi)存數(shù)據(jù)庫(kù)，讀寫非常高速，可達(dá)10w/s的評(píng)率，所以一般應(yīng)用于數(shù)據(jù)變化快、實(shí)時(shí)通訊、緩存等。這篇文章給大家講解一下Python如何使用Redis，并進(jìn)行相關(guān)的實(shí)戰(zhàn)操作。2022-12-12
Caffeine實(shí)現(xiàn)類似redis的動(dòng)態(tài)過(guò)期時(shí)間設(shè)置示例
這篇文章主要為大家介紹了Caffeine實(shí)現(xiàn)類似redis的動(dòng)態(tài)過(guò)期時(shí)間示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了redis主從連接不成功錯(cuò)誤問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教<BR>2024-01-01
Redis教程(十五)：C語(yǔ)言連接操作代碼實(shí)例
這篇文章主要介紹了Redis教程(十五)：C語(yǔ)言連接操作代碼實(shí)例,本篇博客是該系列博客中的最后一篇,在這里將給出基于Redis客戶端組件訪問(wèn)并操作Redis服務(wù)器的代碼示例,需要的朋友可以參考下2015-05-05
本文主要介紹了Redis模糊查詢的幾種實(shí)現(xiàn)方法,包括兩種方法KEYS , SCAN,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02
redis使用watch秒殺搶購(gòu)實(shí)現(xiàn)思路
這篇文章主要為大家詳細(xì)介紹了redis使用watch秒殺搶購(gòu)的實(shí)現(xiàn)思路，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-02-02
利用Redis實(shí)現(xiàn)訂單30分鐘自動(dòng)取消
本文主要介紹了利用Redis實(shí)現(xiàn)訂單30分鐘自動(dòng)取消，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06