普通的树形数据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并传入原始数据,然后返回转换后的数据。
相关推荐
666HZ6668 分钟前
数据结构2.0 线性表
c语言·数据结构·算法
实心儿儿1 小时前
Linux —— 基础开发工具5
linux·运维·算法
charlie1145141912 小时前
嵌入式的现代C++教程——constexpr与设计技巧
开发语言·c++·笔记·单片机·学习·算法·嵌入式
我是苏苏2 小时前
Web开发:C#通过ProcessStartInfo动态调用执行Python脚本
java·服务器·前端
无羡仙2 小时前
Vue插槽
前端·vue.js
哈__2 小时前
React Native 鸿蒙跨平台开发:PixelRatio 像素适配
javascript·react native·react.js
用户6387994773053 小时前
每组件(Per-Component)与集中式(Centralized)i18n
前端·javascript
SsunmdayKT3 小时前
React + Ts eslint配置
前端
清木铎3 小时前
leetcode_day4_筑基期_《绝境求生》
算法