Vue.js 表格嵌套：如何在表格行下方渲染列表数据

<template>
  <table id='myTable'>
    <tr>
      <th>时间</th>
      <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>
        <td>
          <table>
            <tr v-for='card in item.cardList' :key='card.cardId'>
              <td>{{ card.cardName }}</td>
              <td>{{ card.cardStatus }}</td>
              <td>{{ card.cardSize }}</td>
            </tr>
          </table>
        </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 弄',
          cardList: [],
        },
      ],
    };
  },
  methods: {},
};
</script>
<style scoped>
table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  padding: 10px;
  border: 1px #c4c7ce solid;
  text-align: center;
}
table table {
  width: auto;
  margin-top: 10px;
}
</style>