element-ui table 树型结构每次只展开一行

最近做到的项目需要用到表格展开下钻，产品经理要求任意一行展开，其他行收起，类似手风琴效果。

element-ui table 并没有类似的功能，但是根据官方文档给出的 table 的一些 api，进行组合一下，还是能实现这个功能的。

那就直接上代码了：

<template>
  <el-table
    :row-key="getRowKeys"
    :expand-row-keys="expands"
    :data="tableData"
    @expand-change="expandSelect"
  >
    <el-table-column type="expand" width="100">
      <template>
        <div>
          折叠面板内容
        </div>
      </template>
    </el-table-column>
    <el-table-column label="列1" prop="a" align="left" />
    <el-table-column label="列2" prop="b" align="left" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      expands: [],
      getRowKeys(row) {
        return row.id
      },
      tableData: [
        {
          id: 1,
          a: '12',
          b: '34'

        },
        {
          id: 2,
          a: '22',
          b: '44'
        }
      ]
    }
  },
  methods: {
    // 折叠面板每次只能展开一行
    expandSelect(row, expandedRows) {
      var that = this
      if (expandedRows.length) {
        that.expands = []
        if (row) {
          that.expands.push(row.id)
        }
      } else {
        that.expands = []
      }
    }
  }
}
</script>