时间戳

首页 > 解决方案 > 从层次结构 MySQL 表生成 HTML 列表

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

问题描述

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

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} ....]

标签： javascripthtmlvue.js

解决方案

我建议您使用数据结构作为@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>

推荐阅读