element-plus table 实现手风琴效果

Element-Plus是一个基于Vue3的组件库，在实现手风琴效果的表格方面也提供了很好的解决方案。Element-Plus的表格组件提供了很多配置项，可以满足不同的需求。下面是实现步骤：

1.在引入Table组件时，需要同时引入Expand组件，代码如下：

import { ElTable, ElTableColumn, ElExpand } from 'element-plus'

2.为Table添加一列，其中提供了插槽，使得该列的显示可以自定义。这里通过插槽的方式嵌套表格，实现了手风琴效果，代码如下：

<el-table-column label="详细信息">
  <template #default="scope">
    <el-expand transition="el-zoom-in-top">
      <table>
        <tr><td>内容1</td></tr>
        <tr><td>内容2</td></tr>
        <tr><td>内容3</td></tr>
      </table>
    </el-expand>
  </template>
</el-table-column>

3.在Table中设置`highlight-current-row`属性，使得点击每一行时可以高亮该行，代码如下：

<el-table :data="tableData" highlight-current-row>

4.通过给Expand组件设置`trigger`属性来触发展开/收起行为。这里设置为"hover"，鼠标移动到指定行时展开，离开时收起。代码如下：

<el-expand transition="el-zoom-in-top" trigger="hover">

通过以上步骤，成功实现了基于Element-Plus的表格手风琴效果。