javascript - 如何使用 v-for 动态显示带有嵌套循环的数据表

Question

我有一个从我的条目文件中调用的表格组件。Table 组件获取documents作为 prop 传递的对象。在表格组件内部，我有一个表格，它应该将对象数据呈现在另一个之下，以便数据进入。每一行都应该有User name、Document name和date of view。（有关当前和预期结果，请参阅问题底部）。我正面临这个问题，因为对象的结构方式views是嵌套在 中parent，而且我不知道如何在不影响布局的情况下遍历外部对象以进入内部对象（因此使用<span>）

目的：

data() {
    return {
      documents: [
        {
          id: 1,
          name: "Doc 1",
          date: "01.01.1995",
          doc_website: "linktodocument1.com",
          views: [
            {
              id: 4,
              user_name: "Jon",
              doc_id: 1,
              view_date: "01.02.1996",
            },
            {
              id: 1,
              user_name: "Bob",
              doc_id: 1,
              view_date: "05.02.1996",
            },
          ],
        },
        {
          id: 2,
          name: "Doc 2",
          date: "01.01.2000",
          doc_website: "linktodocument2.com",
          views: [
            {
              id: 1,
              user_name: "Bob",
              doc_id: 2,
              view_date: "01.02.1996",
            },
            {
              id: 1,
              user_name: "Jon",
              doc_id: 2,
              view_date: "05.02.1996",
            },
          ],
        },
        {
          id: 3,
          name: "Doc 3",
          date: "01.01.2000",
          doc_website: "linktodocument3.com",
          views: [
            {
              id: 1,
              user_name: "Bob",
              doc_id: 3,
              view_date: "01.02.1996",
            },
            {
              id: 1,
              user_name: "Jon",
              doc_id: 3,
              view_date: "05.02.1996",
            },
            {
              id: 3,
              user_name: "Rob",
              doc_id: 3,
              view_date: "05.02.1996",
            },
          ],
        },
      ],
    };
  },

入口文件：

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Document</th>
        <th>Date</th>
      </tr>
    </thead>
    <table-component :docObject="documents"></table-component>
  </table>
</template>

<script>
import tableComponent from "./table.vue";

export default {
  components: { tableComponent },
}
</script>

零件：

<template>
  <tbody>
    <span v-for="doc in docObject" :key="doc.name">
      <td v-for="view in doc.views" :key="view.id">
        <p>
          {{ view.user_name }}
        </p>
      </td>
      <td>
        <p>
          {{ doc.name }}
        </p>
      </td>
      <td v-for="view in doc.views" :key="view.name">
        <p>
          {{ view.view_date }}
        </p>
      </td>
    </span>
  </tbody>
</template>

<script>
export default {
  components: {},
  props: ["docObject"],
};
</script>

<style scoped>
td {
  padding: 15px 15px;
  border: 1px solid black;
}
</style>

Current Output: 
Name                                                   Document Date      
Jon Bob Doc 1 1.02.1996 05.02.1996
Bob Jon Doc 2 01.02.1996 05.02.1996
Bob Jon Rob Doc 3 01.02.1996 05.02.1996 05.02.1996

Expected Result:
Name             Document           Date
Jon               Doc 1            1.02.1996
Bob               Doc 1            05.02.1996
Bob               Doc 2            01.02.1996
Bob               Doc 2            05.02.1996
Bob               Doc 3            01.02.1996
Jon               Doc 3            05.02.1996
Rob               Doc 3            05.02.1996

Codesandbox 链接：https ://codesandbox.io/s/zealous-cerf-rfmf2?file=/src/components/table.vue:0-585

标签： javascriptvue.jsvue-component

Answer 1

您应该使用template代替，span并且无需使用多个td标签使其进一步复杂化，它可以很简单，如下所示：

<template>
  <tbody>
    <template v-for="doc in docObject">
      <tr v-for="view in doc.views" :key="view.id">
        <td>{{ view.user_name }}</td>
        <td>{{ doc.name }}</td>
        <td>{{ view.view_date }}</td>
      </tr>
    </template>
  </tbody>
</template>

<script>
export default {
  components: {},
  props: ["docObject"],
};
</script>

<style scoped>
td {
  padding: 15px 15px;
  border: 1px solid black;
}
</style>

请检查此代码框：https ://codesandbox.io/s/nice-ives-b33u5?file=/src/components/table.vue

输出：