Table 展开行功能，打开展开项和关闭展开项

Element Plus 的 `el-table` 提供了一种记忆行展开状态的功能，通常通过监听组件的 `beforeDestroy` 或者 `mounted` 生命周期钩子，结合本地存储如 Vuex、localStorage 等来实现。当你需要记住某一行的状态，例如...

### 实现 Element UI `el-table` 组件中的手风琴效果 为了实现在 `el-table` 中展开行的单选（即每次只允许一行处于展开状态），可以利用 Vue 的响应式特性以及 `el-table` 提供的相关属性。具体来说，可以通过监听表格行点击事件并控制每一行是否被展开的状态。 #### 关键点分析 - **数据绑定**：确保每条记录都有唯一的标识符用于追踪其展开/折叠状态。 - **方法定义**：编写切换当前行展开状态的方法，并关闭其他已打开的行[^1]。 下面是一个完整的解决方案： ```html <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` 数组来动态调整哪些行应该保持展开状态。