普通的树形数据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
并传入原始数据,然后返回转换后的数据。
- 内部函数