当前位置: 首页 > article >正文

普通的树形数据primevue的treetable组件的treetable[ ]


1,核心思想就是缺什么属性加什么属性

1.原始数据

原始数据本身就是树状,只是不是TreeNode类型的数组,这样的数据,primevue的treetable组件是展示不出来的,自己把这个数组转成node类型的,会有一个难解决的节点展开的问,我们想用这个组件去解决,那就只能让我们的数据去适应组件了

2.目标数据

3.转换方法

其实可以看出没什么区别,就只是多了一些属性和值,那我们就给原始数据加上不就可以了

  • 原始数据是一个嵌套结构的数组,每个元素可能有children属性,表示子节点。
  • 目标是将原始数据转换为新的格式,为每个节点增加一个key属性,并且将原始节点的数据放在data属性下。

const transformData=(data)=> {
  const transform = (arr, parentKey = '') => {
    return arr.map((item, index) => {
      const newKey = parentKey? `${parentKey}-${index}` : `${index}`;
      const newItem = {
        key: newKey,
        data: {
          id_cases: item.id_cases,
          id_param: item.id_param,
          object_Name: item.object_Name,
          type: item.type,
          desc: item.desc
        },
        children: item.children? transform(item.children, newKey) : []
      };
      return newItem;
    });
  };
  return transform(data);
}
  • 在这个函数中:
    • 内部函数transform接受一个数组arr和一个可选的parentKey参数(默认为空字符串)。
    • 对于数组中的每个元素,它创建一个新的对象,其中key属性根据parentKey和当前元素在数组中的索引生成。data属性包含了原始元素的相关属性,children属性则是通过递归调用transform函数处理子元素得到的(如果存在子元素的话)。
    • 外部函数transformData调用内部函数transform并传入原始数据,然后返回转换后的数据。


http://www.kler.cn/a/456291.html

相关文章:

  • Transformer--Decoder
  • 影刀进阶应用 | 知乎发布想法
  • Lottie动画源码解析
  • 【数据结构】单链表的使用
  • Unity游戏环境交互系统
  • 【MySQL】01.MySQL环境安装
  • android系统查找应用包名以及主activity:
  • WPF 绘制过顶点的圆滑曲线(样条,贝塞尔)
  • 创建用于预测序列的人工智能模型,用Keras Tuner探索模型的超参数。
  • PDF书籍《手写调用链监控APM系统-Java版》第8章 插件与链路的结合:Gson插件实现
  • Arcgis中python工具箱制造要点及统计要素图层字段信息工具分享
  • 【每日学点鸿蒙知识】组件封装通用方法、callback和await性能对比、Web组件下拉刷新、hsp包报错、WebView圆角
  • 使用 Three.js 创建一个 3D 人形机器人仿真系统
  • 基于MATLAB的冰箱水果保鲜识别系统
  • RustDesk内置ID服务器,Key教程
  • 洛谷 P2422:良好的感觉 ← 单调队列+前缀和
  • 【PPTist】表格功能
  • PyTorch框架——基于深度学习LYT-Net神经网络AI低光图像增强系统源码
  • 2.5.3 文件使用、共享、保护、安全与可靠性
  • 瑞芯微全新芯片平台RK3506优势详解,高集成低功耗,为工业而生 触觉智能测评
  • Proteus仿真——《51单片机AD和DA转换器的设计》
  • 【数据结构】单链表的使用
  • 【CSS in Depth 2 精译_096】16.4:CSS 中的三维变换 + 16.5:本章小结
  • 解决VSCODE输出python中文乱码问题
  • 【网络云计算】2024第52周-每日【2024/12/26】小测-理论实操-备份MySQL数据库并发送邮件-解析
  • 【从0带做】基于Springboot3+Vue3的高校食堂点餐系统