vue element table expand 扩展行点击行展示且保证只展示一行

背景:因为element里面的扩展行支持多行展示扩展行,但接到了需求,只能展示一行,如:第一行扩展,点击第二行的时候,第一行收起,第二行展开。同时改成点击行展示扩展内容

<el-table
:data="eventTableData"
style="width: 100%"
@cell-click="clickTable"
ref="refTable"
@selection-change="handleSelectionChange"
@expand-change="expandSelect"
>
<el-table-column type="expand" width="0px" label="扩展">

</el-table-column>

</el-table>

data:{

eventTableData:[],

expands:[],

}

methods:{

clickTable:function(row, column, cell, event){//展开事件日志列表
if(cell.cellIndex!=3 && cell.cellIndex!=10){
this.refs.refTable.toggleRowExpansion(row); } this.getnoTicketReason("",row.businessType); }, handleSelectionChange:function (val) { console.log(val) }, expandSelect:function (row, expandedRows) { var that = this if (expandedRows.length>1) { that.expands = [] if (row) { that.expands.push(row); } this.refs.refTable.toggleRowExpansion(expandedRows[0]);
} else {
that.expands = [];
}
},

}
https://blog.csdn.net/fox_233/article/details/86529227

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容