普通的树形数据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并传入原始数据,然后返回转换后的数据。
相关推荐
OpenGL2 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
贾全12 分钟前
第十章:HIL-SERL 真实机器人训练实战
人工智能·深度学习·算法·机器学习·机器人
rzl0218 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang19 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景21 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼22 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿24 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再26 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
GIS小天27 分钟前
AI+预测3D新模型百十个定位预测+胆码预测+去和尾2025年7月4日第128弹
人工智能·算法·机器学习·彩票
jingling55530 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架