Question

我正在尝试使用标题和正文数据从对象渲染表格：

const mydata = {header: {}, body: {}}

这会产生两个<table>元素：

<template>
  <div class="container" id="ProbabilityTable">
    <div id="v-for-object">
      <table>
        <div v-for="(data, key) in table(html)">

          <thead v-if="key === 'header'">
            // render table header
          </thead>

          <tbody v-if="key === 'body'">          
            // render table body
          </tbody>

        </div>
      </table>
    </div>
  </div>
</template>

是这样的：

<template>
  <div class="container" id="ProbabilityTable">
    <div id="v-for-object">
      <table>
        <div v-for="(data, key) in table(html)">

          <thead v-if="key === 'header'">
            // render table header
          </thead>
          <tbody v-if="key === 'body'">          
            // render body header
          </tbody>

        </div>
      </table>
    </div>
  </div>
</template>

生成一个被破坏的表，因为html表不应该在它们的中间有div。

有什么方法吗？

Answer 1

您可以使用<template></template>代码。

<template>标记不会将自身渲染为元素，但您可以将其用于vue中的条件和循环。

<template>
<div class="container" id="ProbabilityTable">
   <div id="v-for-object">
     <table>
      <template v-for="(data, key) in table(html)">
        <thead v-if="key === 'header'">
        // render table header
        </thead>
        <tbody v-if="key === 'body'">          
        // render body header
        </tbody>
      </template>
      </table>
      </div>
    </div>
</template>

Answer 2

对标头进行一次for循环，然后将您的主体分开，则无需创建额外的div或模板。

<table>
  <thead>
    <tr v-for="(row, headerKey) in table(html).header" :key="headerKey">
      <td>{{ row }}</td>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, bodyKey) in table(html).body" :key="bodyKey">
      <td>{{ row }}</td>
    </tr>
  </tbody>
</table>

Answer 3

您发布的2个片段的解释相同。而且他们都错了。

如此处所述https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table div不是表格的有效内容。因此，每个浏览器都会以不同的方式解释错误。

解决方案：使用有效的HTML语法，看看问题是否仍然存在。

在Vue模板中渲染表

3 个答案: