antd框架tree树动态插入,解决新版Antd无法使用TreeNodes问题

摘要:
如下所示:{title:“child1-1”,expand:true,children:[{title:“leaf1-1-1”,expande:true},{titlet:“leaf1-2-2”,expand:true}]},{title:“child1-2”,expnd:true;children:〔{titled:“leaf1-1”,expnd:true},这是iview的演示数据,其中children是一个固定字段,我们返回的数据字段不应匹配。什么例如,作为建议,我的真实数据是children文件名,我不知道有多少级别,以及如何对应演示解决方案中的树:functiongetTree{letarr=[];if(!!

本文主要解决:

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;
    }

最终效果:

antd框架tree树动态插入,解决新版Antd无法使用TreeNodes问题第1张

.

免责声明:文章转载自《antd框架tree树动态插入,解决新版Antd无法使用TreeNodes问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇django-将数据库数据转换成JSON格式(ORM和SQL两种情况)Electron 自定义软件顶部菜单、右键菜单以及绑定快捷键下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

SpringBoot框架:快速入门搭建运行一个应用程序(一)

一、环境配置 Java环境:1.8版本 开发工具:IntelliJIDEA 二、简单应用 1、创建项目 选择创建的项目类型为Spring Initializr,Project SDK选择1.8版本的java: 选择java版本为8,作为一个入门的简单应用,暂时无需配置其他的项,直接Next即可: 勾选Web中的Spring Web选项,点击Next:...

Asp.Net开源服务端框架,WebApi后端框架(C#.NET)

本文主要讲解基于Asp.Net平台的服务端框架WebApi后端框架,C#语言+SQL数据库(支持多数据库,如:Oracle/MySql)。   C/S框架网最新发布:基于Asp.Net开源服务端框架,WebApi后端框架标准版V1.0   产品介绍:http://www.csframework.com/cs-framework-webapi-1.0.ht...

MvvmLight框架使用入门(一)

  MvvmLight是比较流行的MVVM框架,相对较为简单易用。可能正因为简单,对应的帮助文档不多,对初学者就不够友好了。这里会用几篇随笔,就个人对MvvmLight的使用经验,来做一个入门的介绍。    第一步我们先找到并下载MvvmLight的最新版,我个人倾向使用NuGet。这里顺便吐槽一下,MvvmLight貌似并未在Github上创建项目,虽然...

SpringBoot 学集 (第三章) 日志框架

写在前面:分享技术,共同进步,有不足请见谅,相关意见可评论告知 ~ 编程路漫漫,学习无止尽! 目录 日志框架 SLF4j使用 统一日志记录 SpringBoot日志关系总结 日志框架的使用; 日志的级别 SpringBoot修改日志的默认配置 日志输出格式: 指定配置 常见错误及其异常①log4j中Logger.getLogger(...

NVIDIA深度学习Tensor Core性能解析(上)

NVIDIA深度学习Tensor Core性能解析(上) 本篇将通过多项测试来考验Volta架构,利用各种深度学习框架来了解Tensor Core的性能。 很多时候,深度学习这样的新领域会让人难以理解。从框架到模型,再到API和库,AI硬件的许多部分都是高度定制化的,因而被行业接受的公开基准测试工具很少也就不足为奇。随着ImageNet和一些衍生模型(Al...

爬虫框架 ---- scrapy 框架的介绍与安装

-----  爬虫 基于B/S 模式的数据采集技术,按照一定的规则,自动的抓取万维网信息程序 以一个或多个页面为爬取起点,从页面中提取链接实现深度爬取 使用爬虫的列子 第三方抢票软件(360/猎豹/ 百度抢票/携程/同城等) 机器学习  数据调研 爬虫的调用过程 网络请求 页面解析(目标数据抓取和爬取驱动逻辑) 数据保存 Scrapy 爬虫框架  什么是...