Vue递归渲染tr数组

Question

我必须使用引导程序创建带有表数据的可折叠树。这看起来像下面这样

<tr><td>Parent node1</td><td>...</td><td>...</td></tr>
<tr><td>Subparent node1.1</td><td>...</td><td>...</td></tr>
<tr><td>Subsupparent node1.1.1</td><td>...</td><td>...</td></tr>
<tr><td>Subsupparent node1.1.2</td><td>...</td><td>...</td></tr>
<tr><td>Subparent node1.2</td><td>...</td><td>...</td></tr>
<tr><td>Subsupparent node2.1.1</td><td>...</td><td>...</td></tr>
<tr><td>Subsupparent node2.1.2</td><td>...</td><td>...</td></tr>

我决定在每个级别的 html 上创建 Vue 组件渲染，并通过递归使用自己的数据和子集：

<template id="tree-item">            
           <tr :key="currentNode.id">
                <span @click="setExpanded(currentNode)">
                    <div style="display: inline-block;">
                        <span class="treegrid-indent" :style="{width: 15 * level + 'px'}"></span>
                        <span class="treegrid-expander fa" :class="currentNode.isExpanded ?'fa-chevron-down':'fa-chevron-right'">
                        </span>
                    </div>
                    {{level}}  {{currentNode.id}}
                </span>
            </tr>
                <tree-item v-for="item in currentNode.items" :currentNode="item" :level="level+1"> </tree-item>       
</template>

但我得到 Vue 错误：组件模板应该只包含一个根元素。 有什么方法可以解决这个任务吗？

Answer 1

如果您可以放宽使用列表而不是表格的要求，那么您可以尝试以下操作：

<div class="folder_container">
  <ul class="no_list no_space">
    <FolderTree :folder="folders" :level="0"/>
  </ul>
</div>

FolderTree 组件的模板如下所示：

<template>
  <li>
    <div>
      <div class="folder_name">{{ folder.name }}</div>
    </div>
    <ul v-if="folder.child && folder.child.length > 0" class="no_list no_space">
      <FolderTree
        v-for="(fold,idx) in folder.child"
        :key="fold.id"
        :folder="fold"
        :level="level + 1"
        :last="1 + idx === folder.child.length"
      />
    </ul>
  </li>
</template>

如果您需要使用表格 - 那么您必须以某种方式将嵌套对象转换为线性项目列表/数组。否则你将无法克服模板中只有 1 个根元素的限制（除非你使用渲染函数）。