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

哥谭居民00012024-12-29 20:38

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并传入原始数据，然后返回转换后的数据。