普通的树形数据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并传入原始数据,然后返回转换后的数据。
相关推荐
患得患失94928 分钟前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_31 分钟前
解决VSCode无法加载Json架构问题
java·服务器·前端
朝朝又沐沐3 小时前
算法竞赛阶段二-数据结构(36)数据结构双向链表模拟实现
开发语言·数据结构·c++·算法·链表
YGY Webgis糕手之路3 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔3 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang3 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔3 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
薰衣草23334 小时前
一天两道力扣(6)
算法·leetcode
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
剪一朵云爱着4 小时前
力扣946. 验证栈序列
算法·