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="item.id + 'card'" class='style'>
        <td v-for="card in item.cardList" :key="card.cardId">{{ card.cardName }}</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中的数据也单独成一行，渲染在表格的第一行的下面，可以在表格中添加一个新的tr标签，并在其中使用v-for循环遍历cardList数据，然后在每个td标签中显示对应的数据项。</p>
<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;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&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;item.id + 'card'&quot; class='style'&gt;
        &lt;td v-for=&quot;card in item.cardList&quot; :key=&quot;card.cardId&quot;&gt;{{ card.cardName }}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/template&gt;
</code></pre>
<p>这样就能将cardList中的数据单独成一行，渲染在表格的第一行的下面了。</p>