vue如何在表格数据间插入一个同宽表格

在Vue中，可以使用嵌套的表格组件来实现在表格数据间插入一个同宽表格。以下是一个示例代码：

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.gender }}</td>
        <td>
          <table class="inner-table">
            <tr>
              <th>学科</th>
              <th>成绩</th>
            </tr>
            <tr v-for="(subItem, subIndex) in item.subjects" :key="subIndex">
              <td>{{ subItem.subject }}</td>
              <td>{{ subItem.score }}</td>
            </tr>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 20,
          gender: '男',
          subjects: [
            { subject: '语文', score: 90 },
            { subject: '数学', score: 80 },
            { subject: '英语', score: 85 }
          ]
        },
        {
          name: '李四',
          age: 22,
          gender: '女',
          subjects: [
            { subject: '语文', score: 85 },
            { subject: '数学', score: 75 },
            { subject: '英语', score: 90 }
          ]
        }
      ]
    }
  }
}
</script>

<style>
.inner-table {
  width: 100%;
  border-collapse: collapse;
}

.inner-table th,
.inner-table td {
  border: 1px solid #ccc;
  text-align: center;
}
</style>

在上面的代码中，我们在表格数据的最后一个单元格中嵌套了一个同宽的表格，用来展示学科和成绩信息。同时，我们设置了内部表格的宽度为100%，使其与外部表格的宽度相同。通过这种方式，我们就可以在Vue中实现在表格数据间插入一个同宽表格了。