vue 折叠 表格 支持展开收缩 完整代码

以下是一个基于 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>

在这个示例中，我们使用了一个 people 数组来存储每个人的信息，包括姓名、年龄和国家，同时还添加了一个 visible 属性来标记每个人的详细信息是否可见。我们还定义了一个 details 数组来存储每个人的详细信息。

在 HTML 模板中，我们首先渲染表格的表头。然后使用 v-for 指令遍历 people 数组，为每个人的姓名添加一个按钮，并使用 toggle 方法来切换 visible 属性的值。我们还使用三元表达式来显示一个箭头图标，指示详细信息的可见性。

最后，我们使用第二个 v-for 指令遍历 details 数组，并将每个详细信息渲染到表格中。我们还使用 colspan 属性将每个详细信息单元格跨越整个表格宽度，以便它们出现在正确的位置。