Vue只在第一列的标题下呈现表格的整个行，而不是在所有列的标题下展开单元格

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in data" :key="index" @click="toggleRow(index)">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
      </tr>
      <tr v-for="(row, index) in expandedRows" :key="`expanded-${index}`">
        <td :colspan="headers.length">
          <!-- 展开内容 -->
          <div>这里是行 {{ index + 1 }} 的详细信息</div>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const headers = ['列1', '列2', '列3'];
    const data = [
      ['数据1', '数据2', '数据3'],
      ['数据4', '数据5', '数据6'],
      // 更多数据...
    ];
    const expandedRows = ref([]);

    function toggleRow(index) {
      if (expandedRows.value.includes(index)) {
        expandedRows.value = expandedRows.value.filter(i => i !== index);
      } else {
        expandedRows.value.push(index);
      }
    }

    return { headers, data, expandedRows, toggleRow };
  }
};
</script>