为了防止查看数据时，表格数据过多而导致眼花缭乱

在Element-Plus的官方文档中，el-table的属性中并没有手风琴效果的实现，只有在el-collapse中才有开启手风琴效果的属性。因此想要在el-table中实现手风琴的效果只能自己手动实现。在el-table的事件中有一个expand-change事件，官方给出的解释是当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded），这样我们就可以利用每一次展开某一行时，对其他行进行处理，从而达到手风琴的效果。

首先，我们先创建一个响应式引用myTable，然后使用ref给el-table注册引用信息，让其可以访问到el-table组件的实例。

示例代码

<script>

import {ref} from 'vue';

const myTable = ref(null);

</script>
<template>

<el-table ref="myTable"></el-table>

</template>

在el-table的实例中有一个方法toggleRowExpansion，该方法有两个参数，一个是row：行数据，一个是boolean值：true为展开，false为关闭，使用这个方法来控制每一行的展开和关闭。给expand-change绑定事件处理函数handleExpandChange，在函数中获取el-table实例，判断当前行的唯一标识（一般为id）与展开行的唯一标识是否相等，不相等的行将其关闭，最终实现手风琴的效果。

示例代码

<script>

import {ref} from 'vue';

const tableData = ref([
    ...表格数据
])    

const handleExpandChange = (row, expandedRows)=>{
    if(expandedRows.length > 1){
        expandedRows.forEach(expandedRow =>{
            if(row.id !== expandedRow.id){
                myTable.value.toggleRowExpansion(expandRow, false);
            }
        });
    }
}

</script>
<template>
<el-table ref="myTable" :data="tableData" @expand-change="handleExpandChange"></el-table>
</template>

以下是完整的示例代码，el-table展开行实现手风琴效果。

完整示例代码

<script>

import {ref} from 'vue';

const myTable = ref(null)

const tableData = ref([
    ...表格数据
])    

const handleExpandChange = (row, expandedRows)=>{
    if(expandedRows.length > 1){
        expandedRows.forEach(expandedRow =>{
            if(row.id !== expandedRow.id){
                myTable.value.toggleRowExpansion(expandRow, false);
            }
        });
    }
}

</script>
<template>
<el-table ref="myTable" :data="tableData" @expand-change="handleExpandChange">
<el-table-item />//表格数据展示项
</el-table>
</template>