react ant design TreeNode——樹形菜單筆記

 2017-12-04補充說明——樹形菜單版本號2.x

設置默認該樹形組件展開(默認展開所有樹節點)

參考文檔的寫法：

defaultExpandAll={true} //經過測試並不生效，

另外注意該屬性設置時有一個問題：如何確保默認展開所有樹形的葉子節點時，數據已經加載回來了？如果默認展開所有葉子節點的時候，值沒有加載回來，並不會生效。

 <Tree
        showLine
        defaultExpandAll
        onSelect={this.onSelect}
      >
        <TreeNode title="parent 1" key="0-0">
          <TreeNode title="parent 1-0" key="0-0-0">
            <TreeNode title="leaf" key="0-0-0-0" />
            <TreeNode title="leaf" key="0-0-0-1" />
            <TreeNode title="leaf" key="0-0-0-2" />
          </TreeNode>
          <TreeNode title="parent 1-1" key="0-0-1">
            <TreeNode title="leaf" key="0-0-1-0" />
          </TreeNode>
          <TreeNode title="parent 1-2" key="0-0-2">
            <TreeNode title="leaf" key="0-0-2-0" />
            <TreeNode title="leaf" key="0-0-2-1" />
          </TreeNode>
        </TreeNode>
      </Tree>

 

 

 

 

1.獲取數據源：

2.找到自己想用的樹形控件

<TreeNode title="parent 1" key="0-0">
          <TreeNode title="parent 1-0" key="0-0-0">
            <TreeNode title="leaf" key="0-0-0-0" />
            <TreeNode title="leaf" key="0-0-0-1" />
            <TreeNode title="leaf" key="0-0-0-2" />
          </TreeNode>
          <TreeNode title="parent 1-1" key="0-0-1">
            <TreeNode title="leaf" key="0-0-1-0" />
          </TreeNode>
          <TreeNode title="parent 1-2" key="0-0-2">
            <TreeNode title="leaf" key="0-0-2-0" />
            <TreeNode title="leaf" key="0-0-2-1" />
          </TreeNode>
        </TreeNode>
      </Tree>

3.構建自己的樹形菜單組件：備注：標紅的結束符很重要，由於自己使用過程中未注意，會導致報錯！

  /*
  * 動態構建機構樹形菜單
  * 注意管理員與非管理員之間的樹形菜單展示的效果是不一樣的
  * */
  renderTree = (data,idx) =>{
    console.log('樹形菜單數據源', data);
    return data.map(item => {
      if (!item.children) {
        return (
          <TreeNode title={item.orgName} key={item.orgId} />
        )
      } else {
        return (
          <TreeNode title={item.orgName} key={item.orgId}>
            {this.renderTree(item.children)}
          </TreeNode>
        )
      }
    })

  };

4.調用函數：

const treeElement = this.renderTree(orgTreeAll);

 

 

 2017-12-04補充說明——樹形菜單版本號2.x （3.x的目前還沒去了解過，如有需要單獨說明），后面找時間搭一個3.x的演示一下（關鍵沒得數據源。。。）

 

關注公眾號：回復關鍵字： react-tree 獲取源文件。

 

源碼地址下載：