Vue element-ui table 只允许展开一行,

 

vue页面

<el-table ref="table" border stripe :data="tableData" @expand-change="expandChange">
    <el-table-column type="expand" width="">
        <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.expandData = this.getExpandData(); 
    } 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);
            }
        })
        this.$nextTick(() => {
             this.expandData =this.getExpandData();
        })
    } else {
        //关闭     
        this.expandKeyId = undefined;
        this.expandData =  [];
    }
}

getExpandData(){
    //获取展开行渲染数据。。。。
}