写bug小白 2023-12-18 17:39 采纳率: 95.5%
浏览 3
已结题

嵌套式的数组如何在页面上递归展示

递归数据如何在页面上进行展示？

需求：如果有children数组，就递归一层，在渲染层应该怎么写这个逻辑

实现效果：

img

返回数据格式：


[
    {
        name: "test1",
        value:0,
        children:[
            {
                name:"1-1",
                value:1,
                children:[
                    {
                        name:"1-1-1",
                        value:4
                    }
                ]
            },
            {
                name:"1-2",
                value:2
            },
            {
                name:"1-3",
                value:3
            }
        ]
    },
    {
        name: "test2",
        value:5,
        children:[
            {
                name:"2-1",
                value:6,
                children:[
                    {
                        name:"2-1-1",
                        value:9
                    }
                ]
            },
            {
                name:"2-2",
                value:7
            },
            {
                name:"2-3",
                value:8
            }
        ]
    }
]
...

代码：

<el-collapse v-model="activeNames">
      <div v-for="item in typeList" :key="item.id">
            <el-collapse-item :title="item.name" :name="item.id">
                <el-checkbox v-model="selectAll[item.name]" @change="handleSelectAll(item)">全选</el-checkbox>
                <el-checkbox-group v-model="queryParams.device_sub_type" @change="handleSearch(item)">
                  <el-checkbox style="display: block;" v-for="obj in item.children" :key="obj.id" :label="obj.code">
                    {{ obj.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-collapse-item>
            </div>
          </el-collapse>
  • 写回答

1条回答 默认 最新

  • 之乎者也· 2023-12-18 18:43
    关注

    在页面上展示递归数据通常涉及到递归函数和渲染逻辑。下面是一个基本的示例，展示了如何使用JavaScript在页面上递归地渲染一个包含子节点的数组。

    首先，假设你有一个包含子节点的数组，如下所示：

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

    接下来，你可以使用递归函数来遍历这个数组，并在页面上渲染每个节点。下面是一个简单的示例，使用原生JavaScript来递归渲染这个数组：

    <!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>递归数据展示</title>  
</head>  
<body>  
  <div id="container"></div>  
  
  <script>  
    function renderNode(node, parentElement) {  
      const nodeElement = document.createElement('div');  
      nodeElement.textContent = node.name;  
      parentElement.appendChild(nodeElement);  
  
      if (node.children && node.children.length > 0) {  
        node.children.forEach((child) => {  
          renderNode(child, nodeElement);  
        });  
      }  
    }  
  
    function renderTree(data) {  
      const container = document.getElementById('container');  
      data.forEach((node) => {  
        renderNode(node, container);  
      });  
    }  
  
    // 在页面上渲染数据树  
    renderTree(data);  
  </script>  
</body>  
</html>

    在这个示例中，我们创建了一个renderNode函数，它接受一个节点和一个父元素作为参数。该函数创建一个新的div元素，设置其文本内容为节点的名称，并将其添加到父元素中。如果节点有子节点，该函数将递归地调用自身来渲染子节点。最后，我们创建了一个renderTree函数，它接受整个数据数组，并遍历数组中的每个节点，调用renderNode函数来渲染它们。最后，我们调用renderTree函数来在页面上渲染整个数据树。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 12月27日
  • 已采纳回答 12月19日
  • 创建了问题 12月18日

悬赏问题

  • ¥15 MPI读取tif文件无法正常给各进程分配路径
  • ¥15 如何用MATLAB实现以下三个公式（有相互嵌套）
  • ¥30 关于#算法#的问题：运用EViews第九版本进行一系列计量经济学的时间数列数据回归分析预测问题 求各位帮我解答一下
  • ¥15 setInterval 页面闪烁，怎么解决
  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题：做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化
  • ¥15 Mirare PLUS 进行密钥认证？（详解）