Element UI 表格展开@expand-change 每次只展开一行

场景：最近在项目中，遇到一个小效果，顺便记录下，

        在一个统计列表中，每一项里面有对应的内容，点击每一项前面的三角展开符，显示对应的内容

 效果图

实现步骤：

<el-table :data="StatisticList" border :row-key='getRowKeys' :expand-row-keys="expands" @expand-change="tableClick">

 </el-table>

 :row-key='getRowKeys'              作为每一项的key，确保唯一性

:expand-row-keys="expands"     用来存储唯一的值

data中定义：
expands: [],
getRowKeys (row) {
    return row.id
},
methods中的方法

tableClick(row,expandRows){//方法
    var that = this
    if (expandRows.length) {
        that.expands = []
        if (row) {
            that.expands.push(row.id)
        }
    } else {
        that.expands = []
    }
},

以上仅代表个人片面理解，欢迎各位大神指导

也可参考官网 Element - The world's most popular Vue UI framework