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

 

1、table 部分

:row-key='getRowKeys'
:expand-row-keys="expands"
@expand-change="expandSelect"

2、column 部分 ：參見官方示例

<el-table-column type="expand" >
      <template slot-scope="props">
       XXXX
      </template>
 </el-table-column>

3、data部分

 data:{
       expands: [],
 },

4、methods部分

getRowKeys: function (row) {
  return row.id
},
expandSelect: function (row, expandedRows) {
  var that = this
  if (expandedRows.length) {
    that.expands = []
    if (row) {
      that.expands.push(row.id)
    }
  } else {
    that.expands = []
  }
}

 

 

參考：

https://www.cnblogs.com/qianjin888/p/10246108.html

https://blog.csdn.net/katy_1/article/details/85113191