当前位置：首页 > article >正文

树形查询转成TreeNode[]，添加新节点

article 2025/1/3 5:28:17

在使用PrimeVue的TreeTable组件时，需要将带有层级的数据转换为TreeNode[]类型的数据结构。TreeNode是PrimeVue中定义的一个接口，用于表示树节点。通常，带有层级的数据是一个嵌套的对象或数组，其中每个对象可能包含子对象，形成树状结构。

以下是一个将带有层级的数据转换为TreeNode[]的示例方法：

假设你的数据结构如下：

const data = [
  {
    id: 1,
    name: 'Node 1',
    children: [
      {
        id: 2,
        name: 'Node 1.1',
        children: [
          {
            id: 3,
            name: 'Node 1.1.1'
          }
        ]
      },
      {
        id: 4,
        name: 'Node 1.2'
      }
    ]
  },
  {
    id: 5,
    name: 'Node 2'
  }
];

你可以使用递归函数将其转换为TreeNode[]：

function convertToTreeNode(data) {
  return data.map(item => {
    const node: TreeNode = {
      data: item,
      children: item.children? convertToTreeNode(item.children) : []
    };
    return node;
  });
}

const treeNodes = convertToTreeNode(data);

在这个示例中，convertToTreeNode函数接受一个带有层级的数据对象，并返回一个TreeNode[]类型的数组。每个TreeNode对象包含一个data属性，用于存储原始数据对象，以及一个children属性，用于存储子节点的TreeNode对象。

转换后的数据可以直接用于PrimeVue的TreeTable组件：

<template>
  <TreeTable :value="treeNodes">
    <Column field="name" header="Name"></Column>
  </TreeTable>
</template>

<script>
import { TreeTable, Column } from 'primevue/treetable';
import { TreeNode } from 'primevue/api';

export default {
  components: {
    TreeTable,
    Column
  },
  data() {
    return {
      treeNodes: []
    };
  },
  mounted() {
    // 假设你的数据已经通过API获取并存储在data变量中
    const data = [
      // 数据结构同上
    ];
    this.treeNodes = convertToTreeNode(data);
  },
  methods: {
    convertToTreeNode(data) {
      // 转换函数同上
    }
  }
};
</script>

这样，你就可以在TreeTable组件中显示带有层级的数据了。

以下是在JavaScript中为`Node 2`添加一个子节点的示例代码：

// 假设这是原始数据结构
const data = [
    {
        id: 1,
        name: 'Node 1',
        children: [
            {
                id: 2,
                name: 'Node 1.1',
                children: [
                    {
                        id: 3,
                        name: 'Node 1.1.1'
                    }
                ]
            },
            {
                id: 4,
                name: 'Node 1.2'
            }
        ]
    },
    {
        id: 5,
        name: 'Node 2'
    }
];

// 找到Node 2对象
const node2 = data.find((node) => node.id === 5);

// 创建新的子节点
const newChild = {
    id: 6,
    name: 'Node 2.1'
};

// 如果Node 2还没有children属性，则创建一个空数组并添加新子节点
if (!node2.children) {
    node2.children = [];
}
node2.children.push(newChild);

console.log(data);

在上述代码中：