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" class='style'>
        <td>{{ item.date }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.address }}</td>
      </tr>
      <tr v-for="item in tableData" :key="'card-' + item.id">
        <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中的数据单独成一行，渲染在表格的第一行的下面，可以在表格中使用嵌套的v-for循环来渲染cardList中的数据。具体步骤如下：</p>
<ol>
<li>
<p>在表格中的第一行下面添加一个新的tr元素，并使用v-for循环渲染cardList中的数据。在tr元素上使用一个新的v-for循环，循环遍历tableData中的每个item，然后在每个item中再使用v-for循环渲染item.cardList中的每个card对象。</p>
</li>
<li>
<p>在内层的v-for循环中，使用一个新的td元素来显示card对象的数据。</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; class='style'&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;'card-' + item.id&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中的数据单独成一行，渲染在表格的第一行的下面。注意，使用了colspan=&quot;3&quot;来让cardList的数据横跨整行显示。</p>