视图层
<el-table ref="table" border stripe :data="tableData" @expand-change="expandChange">
<el-table-column type="expand">
<template slot-scope="scope">
</template>
</el-table-column>
</table>
逻辑层
//定义一个 expandKeyId = undefined;
expandChange(row, expandedRows) {
if (expandedRows.length == 1) {
if (!this.expandKeyId) {
this.expandKeyId = row.id;
}
this.getDetailDataFn(row) // 获取详情接口
} else if (expandedRows.length >= 2) {
//已经展开一行
this.expandKeyId = expandedRows[expandedRows.length - 1].id; //获取最后一个点开的rowID
//遍历表格数据,关闭其他的展开行
this.tableData.map(item => {
if (item.id != this.expandKeyId) {
this.$refs.table.toggleRowExpansion(item, false);
}
})
} else {
//关闭
this.expandKeyId = undefined;
this.expandData = [];
}
},