从层次结构 MySQL 表生成 HTML 列表

Question

我有一个像这样的层次结构表

id| name         | parent_id | header 
1 | Assets       | 0         | Y
2 | Fixed Assets | 1         | Y
3 | Asset One    | 2         | N
4 | Income       | 1         | N

我通过 axios 提取这些数据并尝试以下面的方式呈现

我正在尝试生成这样的 UL LI 列表

<ul>
    <li id="asset-main-id">
        Assets
        <ul>
            <li id="fixed-asset-header">
                Fixed Assets
                <ul>
                    <li id="fa-asset-child-one">Asset One</li>
                </ul>
            </li>
            <li id="asset-child">Income Receiveables</li>
        </ul>
    </li>
</ul>

它会有多个父子关系，这意味着它可以达到 10 个级别。我对如何实现这一点感到困惑。

有人可以指导我实现这一目标吗？

虚拟负载

[{id: 1, name: assets, parent_id: 0, header:Y}, {id: 2, name: Fixed Assets, parent_id: 1, header:Y} ....]

Answer 1

我只想给你一个替代方案。 如果您可以更改表示数据的方式，那将会容易得多。它可能取决于对您提取数据的服务的控制权。

例子：

var data = {
  "id": 1,
  "name": "Assets",
  "header": true,
  "children": [
    {
      "id": 2,
      "name": "Fixed Assets",
      "header": true,
      "children": [
        {
          "id": 3,
          "name": "Asset One",
          "header": false
        }
      ]
    },
    {
      "id": 1,
      "name": "Income",
      "header": false
    }
  ]
}

之后，这个例子会引导你一个解决方案：https://vuejs.org/v2/examples/tree-view.html

Answer 2

我建议您使用数据结构作为@The_Cute_Hedgehod 提供嵌套的父子关系。

我可以添加一个示例，如何将您当前的 ds 转换为它。

获得给定的有效负载后，您始终可以使用自定义 vue 组件对其进行渲染

您可以在此处找到完整的工作示例： https://codepen.io/omer-shacham/pen/xxbrxdO

示例数据

var data = [{
  "id": 1,
  "name": "Assets",
  "children": [
    {
      "id": 2,
      "name": "Fixed Assets",
      "children": [
        {
          "id": 3,
          "name": "Asset One",
        }
      ]
    },
    {
      "id": 1,
      "name": "Income",
    }
  ]
}

示例模板

<template>
    <li>
    {{ name }}
        <ul v-if="children.size > 0">
            <TreeNode v-for="child in children" :node="child"/>
        </ul>
    </li>
</template>

和你的根应用

<ul>
   <TreeNode v-for="child in root" :child="child"/>
</ul>