Element UI 表格：如何关闭其他展开行，只保留当前展开行

在 Element UI 表格组件中，我们可以使用 expand-change 事件来实现展开行功能。当用户展开某一行时，我们可能希望关闭其他已展开的行，只保留当前展开的行。

我们可以通过在 expand-change 事件的处理函数中记录当前展开的行的索引，然后在循环遍历表格数据时，根据索引判断是否展开该行。

以下是一个示例代码：

<el-table :data="tableData" @expand-change="expandClick">
  <el-table-column type="expand">
    <template slot-scope="props">
      <span v-if="props.rowIndex === expandedRowIndex">展开内容</span>
    </template>
  </el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

data() {
  return {
    tableData: [
      { name: '张三', age: 20 },
      { name: '李四', age: 25 },
      { name: '王五', age: 30 }
    ],
    expandedRowIndex: -1 // 记录展开的行索引
  };
},
methods: {
  expandClick(row, expandedRows) {
    if (expandedRows.length > 0) {
      this.expandedRowIndex = expandedRows[0].$index;
    } else {
      this.expandedRowIndex = -1;
    }
  }
}

在上述示例中，expandClick 方法中通过 expandedRows 参数获取当前展开的行，如果有展开的行，则记录展开行的索引；如果没有展开的行，则将 expandedRowIndex 重置为 -1。

在展开行的 <template> 中，通过判断当前行的索引是否与 expandedRowIndex 相等，来决定是否展示展开的内容。