Question

可能是一个基本的，但我已经挣扎了一段时间。我正在尝试在Vue 2中创建一个Table组件，使用v-for填充数据。

我希望它是：
Head1 Head2 Head3 Head4
1 2 3 4
11 22 33 44

我最好的尝试：

  <table class="timeline-table">
  <thead>
    <tr v-for="(row, key, v) in rows">
      <th>{{ key }}</th>
      <th>{{ key }}</th>
      <th>{{ key }}</th>
      <th>{{ key }}</th>
    </tr>
  </thead>
    <tbody v-for="row in rows">
      <tr>
        <td>{{ row.Head1 }}</td>
        <td>{{ row.Head2 }}</td>
        <td>{{ row.Head3 }}</td>
        <td>{{ row.Head4 }}</td>
      </tr>
    </tbody>
  </table>

数据结构为：

  rows: [{
    Head1: '1',
    Head2: '2',
    Head3: '3',
    Head4: '4'
  },
  {
    Head1: '11',
    Head2: '22',
    Head3: '33',
    Head4: '44'
  }]

尝试了各种各样的行，例如rows [0]，并将v-for嵌套到r in row中，但没有成功。

非常感谢！

Answer 1

在标题中，v-for而不是th需要tr，您还需要在一行中循环键来创建标题而不是循环遍历行：

<table class="timeline-table" id="my-table">
  <thead>
    <tr>
      <th v-for="key in Object.keys(rows[0])">{{ key }}</th>
    </tr>
  </thead>
  <tbody v-for="row in rows">
    <tr>
      <td v-for="key in Object.keys(row)">{{ row[key] }}</td>
    </tr>
  </tbody>
</table>

请参阅fiddle here。

Vue.js v-for嵌套在Table中

1 个答案: