使用场景:
饿了么的table展开行,通常可以用来展示一些详细信息,或者二级列表,表格等等内容。
但过多的展开会使得页面显得混乱,所以此类功能中常有要求,一次仅打开一行。自然就会出现禁止打开某一行的情况。相应实现方式如下
<el-table
ref="myTable"
:data="tableData"
show-summary
:summary-method="getSummaries"
@selection-change="handleSelectionChange"
@sort-change="sortChange"
@filter-change="handleFilterChange"
border
:row-key="getRowKey"
:expand-row-keys='expands'
@expand-change="expandChange"
>
:row-key="getRowKey" //行数据的 Key,唯一值没啥说的
:expand-row-keys='expands' //展开行的集合,记得声明,是个数组
@expand-change="expandChange" //点击展开行的方法
expandChange(row, expandedRows) {
console.log(row, expandedRows)
this.expands = [];
if(row.id=='1234567890') { //满足条件才可以展开
this.expands.push([])
}else
if(expandedRows.length>0) { //仅可以展开一行
this.expands.push(row?row.id:[])
}
},