将数据结构自定义为 table

Question

我有一个关于树组件的问题。是否可以使我的树组件像 table 一样？这就是我真正想要的：

这是文档示例中的一些片段：

nodes = [
    {
      id: 1,
      name: "Санхүү",
      children: [{ id: 2, name: "child1" }, { id: 3, name: "child2" }]
    },
    {
      id: 4,
      name: "Санхүүгийн бус",
      children: [
        { id: 5, name: "Данс нээх харилцах" },
        {
          id: 6,
          name: "Карт захиалах",
          children: [{ id: 7, name: "subsub" }]
        }
      ]
    }
  ];

Answer 1

我认为最好的方法是用节点创建一个 table。为此，我们使用变量 "data" 和递归函数。

data:any[]=[]
  getData(data:any[],index,nodes)
  {
    nodes.forEach(x=>{
      x.level=index
      data.push(x)
      if (x.children && x.open)
        this.getData(data,index+1,x.children)
    })
    return data;
  }

看到在 "data" 中我们有节点和一个 "level" 让我们知道在哪个级别是我们的节点。如果我们有一个 .html like

<table>
  <tr *ngFor="let item of data">
    <td [style.padding-left]="(2*item.level)+'rem'">
      <button *ngIf="item.children" (click)="click(item)">+</button>
      {{item.name}}</td>
  </tr>
</table>

当我们点击时调用函数

click(item)
  {
    item.open=!item.open;
    this.data=[];
    this.getData(this.data,0,this.nodes)
  }

确实是一个丑陋的例子，但是this stackblitz展示了table

将数据结构自定义为 table

Customizing data structure as table

angular

treeview

angular-tree-component