element-ui表格展开行每次只能展开一行

代码：

<template>
  <el-table
    :row-key="getRowKeys"
    :expand-row-keys="expands"
    :data="tableData"
    :default-sort = "{prop: 'payment_date', order: 'descending'}"
    type="index"
    style=" 100%"
    @expand-change="expandSelect">
    <!-- 排序:default-sort sortable -->
    <el-table-column label="申请时间" prop="date_created" sortable align="left"/>
    <el-table-column label="操作" align="left" width="100px">
      <template slot-scope="scope">
        <button class="btn" @click="handleEdit(scope.$index, scope.row)">查看</button>
      </template>
    </el-table-column>
    <!-- expand：折叠面板 -->
    <el-table-column type="expand">
      <template slot-scope="scope">
        <div class="bottom_content">
          折叠面板 type为expand。方法：@expand-change="expandSelect"
          expand-change: 当用户对某一行展开或者关闭的时候会触发该事件
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      expands: [],
      getRowKeys(row) {
        return row.id
      },
      tableData: [// table数据
        {
          date_created: 'fsdaf',
          id: '333'

        },
        {
          date_created: 'fsdreraf',
          id: 'erer'

        }
      ]
    }
  },
  methods: {
    // 折叠面板每次只能展开一行
    expandSelect(row, expandedRows) {
      // console.log('expandedRows', expandedRows)
      // console.log('row', row)
      var that = this
      if (expandedRows.length) {
        that.expands = []
        if (row) {
          that.expands.push(row.id)// 每次push进去的是每行的ID
        }
      } else {
        that.expands = []// 默认不展开
      }
      // console.log('that.expands', that.expands)
    },
    handleEdit(index, row) {}
  }
}
</script>

参照这个博客园自己写的demo:https://www.jianshu.com/p/a59c22202f2c