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

代碼：

<template>
  <el-table
    :row-key="getRowKeys"
    :expand-row-keys="expands"
    :data="tableData"
    :default-sort = "{prop: 'payment_date', order: 'descending'}"
    type="index"
    style="width: 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