Vue 折叠表格组件：实现展开和收缩功能

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Country</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(person, index) in people" :key="index">
          <td>
            <button @click="toggle(index)">
              {{ person.name }}
              <span v-if="person.visible">&#9650;</span>
              <span v-else>&#9660;</span>
            </button>
          </td>
          <td>{{ person.age }}</td>
          <td>{{ person.country }}</td>
        </tr>
        <tr v-for="detail in details" :key="detail">
          <td colspan="3">{{ detail }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      people: [
        { name: 'John', age: 30, country: 'USA', visible: false },
        { name: 'Jane', age: 25, country: 'Canada', visible: false },
        { name: 'Bob', age: 40, country: 'Australia', visible: false },
      ],
      details: [
        'John is a software developer',
        'Jane is a graphic designer',
        'Bob is a project manager',
      ],
    };
  },
  methods: {
    toggle(index) {
      this.people[index].visible = !this.people[index].visible;
    },
  },
};
</script>
<p>在这个示例中，我们使用了一个 <code>people</code> 数组来存储每个人的信息，包括姓名、年龄和国家，同时还添加了一个 <code>visible</code> 属性来标记每个人的详细信息是否可见。我们还定义了一个 <code>details</code> 数组来存储每个人的详细信息。</p>
<p>在 HTML 模板中，我们首先渲染表格的表头。然后使用 <code>v-for</code> 指令遍历 <code>people</code> 数组，为每个人的姓名添加一个按钮，并使用 <code>toggle</code> 方法来切换 <code>visible</code> 属性的值。我们还使用三元表达式来显示一个箭头图标，指示详细信息的可见性。</p>
<p>最后，我们使用第二个 <code>v-for</code> 指令遍历 <code>details</code> 数组，并将每个详细信息渲染到表格中。我们还使用 <code>colspan</code> 属性将每个详细信息单元格跨越整个表格宽度，以便它们出现在正确的位置。</p>