antd為Tree組件標題附加操作按鈕功能

Posted on by

一、前言

使用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組件按鈕功能內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：