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个根元素的限制（除非您使用渲染功能）。

Vue递归渲染tr数组

1 个答案: