Vue.js表格数据渲染：如何将cardList数据放在表格数据下方

<template>
  <table id="myTable">
    <tr>
      <th>时间</th>
      <th>姓名</th>
      <th>地址</th>
    </tr>
    <tbody>
      <tr v-for="item in tableData" :key="item.id">
        <td>{{ item.date }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.address }}</td>
      </tr>
      <tr v-for="item in tableData" :key="item.id + 'card'">
        <td colspan="3">
          <div v-for="card in item.cardList" :key="card.cardId">
            {{ card.cardName }} - {{ card.cardStatus }} - {{ card.cardSize }}
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  name: "TableMerge",
  data() {
    return {
      checked: false,
      tableData: [
        {
          id: 1,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          cardList: [
            {
              cardName: '测试',
              cardStatus: 'success',
              cardSize: 'big',
              cardId: 100,
            },
            {
              cardName: '测试',
              cardStatus: 'success',
              cardSize: 'big',
              cardId: 101,
            },
            {
              cardName: '测试',
              cardStatus: 'success',
              cardSize: 'big',
              cardId: 102,
            },
            {
              cardName: '测试',
              cardStatus: 'success',
              cardSize: 'big',
              cardId: 103,
            },
          ],
        },
        {
          id: 5,
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
      ],
    };
  },

  methods: {},
};
</script>
<style scoped>
table {
  border-collapse: collapse;
}
th,
td {
  padding: 10px;
  width: 200px;
  border: 1px #c4c7ce solid;
  text-align: center;
}
</style>
<p>为了实现将cardList中的数据渲染在第一行对应表格数据的下面，可以在表格中添加一个新的行来展示cardList的数据。可以按照以下步骤进行操作：</p>
<ol>
<li>
<p>在表格的tbody标签中，使用v-for循环遍历tableData数组，将每个表格数据渲染为一行。</p>
</li>
<li>
<p>在每个表格数据的下面添加一个新的行，用于展示cardList的数据。可以在每个表格数据的下面插入一个tr标签，并设置一个特殊的key值，以便Vue能够正确识别和更新这个新行。</p>
</li>
<li>
<p>在新行中使用v-for循环遍历cardList数组，将每个cardList数据渲染为一行。</p>
</li>
</ol>
<p>下面是修改后的代码示例：</p>
<pre><code class="language-html">&lt;template&gt;
  &lt;table id=&quot;myTable&quot;&gt;
    &lt;tr&gt;
      &lt;th&gt;时间&lt;/th&gt;
      &lt;th&gt;姓名&lt;/th&gt;
      &lt;th&gt;地址&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tbody&gt;
      &lt;tr v-for=&quot;item in tableData&quot; :key=&quot;item.id&quot;&gt;
        &lt;td&gt;{{ item.date }}&lt;/td&gt;
        &lt;td&gt;{{ item.name }}&lt;/td&gt;
        &lt;td&gt;{{ item.address }}&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr v-for=&quot;item in tableData&quot; :key=&quot;item.id + 'card'&quot;&gt;
        &lt;td colspan=&quot;3&quot;&gt;
          &lt;div v-for=&quot;card in item.cardList&quot; :key=&quot;card.cardId&quot;&gt;
            {{ card.cardName }} - {{ card.cardStatus }} - {{ card.cardSize }}
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/template&gt;
</code></pre>
<p>这样修改后，cardList中的数据会渲染在对应表格数据的下面，而不是后面。</p>