实现element-ui的table嵌套表格点击父表格只允许一行展开

问题描述

最近在做个人博客项目的时候，在写后台博客管理的时候，查询博客的时候，在评论字段点击，会以嵌套表格的形式显示此篇博客对应的博客，因为嵌套表格的数据是动态获取的，如果打开多行，就会出现打开的所有嵌套列表中显示的是最后一次打开博客的评论。

解决思路

所以为了处理这个bug,可以设置只可以打开一行，打开下一行的时候，上一行的嵌套表格关闭。

解决方法

1. 首先在父表格加入

@expand-change="expandSelect" 
:row-key='getRowKeys'
:expand-row-keys="expands"

 <!--       表格      -->
<el-table
        ref="blogTable"
        :data="blogs"
        tooltip-effect="dark"
        stripe
        @sort-change="sortBlog"
        @selection-change="handleSelectionChange"
        @expand-change="expandSelect"
        :row-key='getRowKeys'
        :expand-row-keys="expands"
>	
	<!--    为了方便观看，一些字段省略      -->
    ...
    <el-table-column
            type="expand"
            label="评论"
            align="center"
            min-width="200"
    >
        <template slot-scope="scope" @click="searchObserve(scope.row.blog.id)">
            <!--    评论回复表格      -->
            <el-table
                    ref="observeTable"
                    :data="observe"
                    tooltip-effect="dark"
                    style="width: 100%"
                    stripe
                    row-key="observeContent"
                    default-expand-all
                    :tree-props="{children: 'nextNodes', hasChildren: 'hasChildren'}">
                >
                <el-table-column
                        align="center"
                        label="评论者"
                        min-width="120">
                    <template slot-scope="scope">{{ scope.row.user.nickname }}</template>
                </el-table-column>
               ...
            </el-table>
        </template>
    </el-table-column>
</el-table>

2. 在js data中添加

expands: [], //只展开一行放入当前行id
getRowKeys (row) { //设置row-key只展示一行
     return row.blog.id
 },

3. js methods中添加方法

// 展开行变化时触发
expandSelect(row,expandedRows) {
	//加载前先将上次的数据模型情况，不然会出现点击展开嵌套表格后，先显示上一次的数据，然后渲染这次的数据。
    this.observe = [];
    //只展开一行
    if (expandedRows.length) {//说明展开了
        this.expands = [];
        if (row) {
            this.expands.push(row.blog.id);//只展开当前行id
        }
    } else {//说明收起了
        this.expands = [];
    }
    
    // 发起axios请求数据
    this.$http.get("/observe/" + row.blog.id
    ).then(resp => { // 这里使用箭头函数
        this.observe = resp.data;
        this.totalSize = resp.data.size;
        //完成赋值后，把加载状态赋值为false
        this.loading = false;
    })
}

修改后效果

参考文章：
elementui展开行踩过的坑