Визуализация таблицы в шаблоне Vue - PullRequest
Новая
       9

Визуализация таблицы в шаблоне Vue

0 голосов
/ 07 июня 2018

Я пытаюсь отобразить таблицу из объекта с данными заголовка и тела: 

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'ов в середине.

Есть ли способ обойти это?

Ответы [ 3 ]

0 голосов
/ 08 июня 2018

Вы можете использовать тег <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>
0 голосов
/ 20 марта 2019

Сделайте цикл 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>
0 голосов
/ 07 июня 2018

2 отправленных вами фрагмента интерпретируются одинаково.И оба они не правы.

Как указано здесь https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table div не является допустимым содержимым таблиц.И из-за этого каждый браузер будет интерпретировать ошибку по-разному.

Решение: используйте допустимый синтаксис HTML и посмотрите, сохраняется ли проблема.

...