[CSDN原文](https://blog.csdn.net/xuxu_qkz/article/details/80166442)
~~~
<el-table
:data="tableData"
v-loading="loading"
:height="height"
style="width: 100%;"
:row-key="getRowKeys"
@row-click="rowClick"
@expand-change="showDetail"
:expand-row-keys="expands"
>
<el-table-column
label="點擊展開"
width="100"
type="expand"
>
<template slot-scope="props">
</template>
</el-table-column>
<el-table-column
prop="alarmTypeName"
label="事件"
min-width="150"
>
<template slot-scope="scope">
<span :style="colorStyle(scope.row.alarmLevel)" style="width:10px;height:12px;display:inline-block;margin-right:10px;"></span><span>{{scope.row.alarmTypeName}}</span>
</template>
</el-table-column>
</el-table>
data(){
getRowKeys(row) {
return row.id;
},
expands: [],
tableData:[]
},
methods:{
rowClick(data, event, column){
// console.log('點擊行出發','column',column.label)
if(column.label !== '點擊展開'){
this.expands=[];
}
},
//點擊展開列表詳細數據
showDetail(data,expandedRows) {
//控制只顯示當前行
if (expandedRows.length) {
this.expands = [];
if (data) {
this.expands.push(data.id);
}
}else{
this.expands = [];
}
}
}
~~~
