el-table展开行手风琴

### 实现 Element UI `el-table` 组件中的手风琴效果

为了实现在 `el-table` 中展开行的单选（即每次只允许一行处于展开状态），可以利用 Vue 的响应式特性以及 `el-table` 提供的相关属性。具体来说，可以通过监听表格行点击事件并控制每一行是否被展开的状态。

#### 关键点分析

- **数据绑定**：确保每条记录都有唯一的标识符用于追踪其展开/折叠状态。
- **方法定义**：编写切换当前行展开状态的方法，并关闭其他已打开的行[^1]。

下面是一个完整的解决方案：

<template>
  <div id="app">
    <!-- 定义table组件 -->
    <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick"
              :expand-row-keys="expandedRows" row-key="id">
      <el-table-column type="expand">
        <template slot-scope="props">
          <p>{{ props.row.description }}</p> <!-- 展开显示的内容 -->
        </template>
      </el-table-column>
      <el-table-column label="日期" prop="date"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      expandedRows: [], // 存储当前展开行ID数组
      tableData: [
        { date: '2016-03', name: 'Tom', description: '描述一' },
        { date: '2016-05-02', name: 'Jack', description: '描述二' }
      ]
    };
  },
  methods: {
    handleRowClick(row) {
      const index = this.expandedRows.indexOf(row.id);
      
      if (index === -1 && !this.expandedRows.includes(row.id)) {
        this.expandedRows = [row.id]; // 只保留最新点击的那一项作为唯一展开项
      } else {
        this.expandedRows = []; // 如果再次点击已经展开的项目，则收起它
      }
    }
  }
};
</script>

上述代码片段展示了如何设置 `el-table` 来支持手风琴样式的行展开功能。这里的关键在于使用了 `@row-click` 监听器捕获用户的交互行为，并通过修改 `expandedRows` 数组来动态调整哪些行应该保持展开状态。