Vue element-ui table组件只展开一行(手风琴效果)

直接上代码了哈~

<template>
  <div class="app-content">
    <div class="table_expand_item">
      <b>element-ui table只展开一行demo</b>
      <el-table
        :data="tableData"
        :row-key="getRowKeys"
        :expand-row-keys="expands"
        border
        style="750px; margin-top:20px;"
        @expand-change="expandSelect">
        <el-table-column type="expand" label="展开" width="60px">
          <template slot-scope="scope">
            我是表格行展开的信息{{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="日期"
          align="center" />
        <el-table-column
          prop="name"
          label="姓名"
          align="center" />
        <el-table-column
          prop="address"
          label="地址"
          align="center" />
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id: 'a',
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 'b',
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 'c',
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        id: 'd',
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      getRowKeys(row) { // 行数据的Key
        return row.id
      },
      expands: [] // 通过该属性设置Table目前的展开行，需要设置row-key属性才能使用，该属性为展开行的keys数组
    }
  },
  methods: {
    // table每次只能展开一行
    expandSelect(row, expandedRows) {
      this.expands = []
      if (expandedRows.length > 0) {
        row ? this.expands.push(row.id) : ''
      }
    }
  }
}
</script>

结合element-ui官方文档来阅读，很快就能搞懂原理~

如有错误，请多指教，谢谢！