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

Posted 2023-03-09

参考技术A 背景：因为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(expandedRows[0]);
else
that.expands = [];

,


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