antd框架tree樹動態插入,解決新版Antd無法使用TreeNodes問題


本文主要解決:

iview樹形組件使用問題,已經有后台數據,請問如何對應treeData的字段?

如下所示

 {
          title: 'child 1-1',
          expand: true,
          children: [
            {
              title: 'leaf 1-1-1',
              expand: true
            },
            {
              title: 'leaf 1-1-2',
              expand: true
            }
          ]
        },
        {
          title: 'child 1-2',
          expand: true,
          children: [
            {
              title: 'leaf 1-2-1',
              expand: true
            },
            {
              title: 'leaf 1-2-1',
              expand: true
            }
          ]
        }
      ]

這是iview的demo數據,這里面children title是固定的字段和我們回台返回數據字段不對應怎么辦?求指教,比如我真實數據是childrenFilenames,還有就是我不知道有多少層級,怎么和demo里tree對應呢

 

方案:

 function getTree(tree = []) {
        let arr = [];
        if (!!tree && tree.length !== 0) {
            tree.forEach(item => {
                let obj = {};
                obj.title = item.name;
                obj.attr = item.attr; // 其他你想要添加的屬性
                obj.expand = false;
                obj.selected = false;
                obj.children = getTree(item.childrenFilenames); // 遞歸調用
                arr.push(obj);
            });
        }
        return arr;
    }

最終效果:

 

 

 

 

 

 

.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM