vue element ui 行展开加载表格，每次展开一行关闭其他行和展开多行

需求：有一个表格，要求行展开得到该行的详细数据，每行的详细数据字段不一致。

在网上搜了下，做完发现，展开某行数据时会把所有展开替换掉，是自己定义变量的问题，改完之后看了下到单行行展开，参考了大佬们的博客，这里不再过多赘述
vue-element el-table点击行展开，并且收起其他行_el-table展开一行 自动收起上一行-CSDN博客

但需求要求全部可展开，话不多说上代码
 

        <el-table ref="table" :height="height" stripe border v-loading="loading"  :data="tracedBackList"
//默认全部加载可不用row-key和expand-change事件
     row-key="pid" @expand-change="handleExpandChange">
            <el-table-column type="expand" >
                <template #default="props">
                    <div>
                        <el-table :data="props.row.children" ref="childTable" :border="childBorder" >
                            <el-table-column class="expanded-table-colum"
                                             v-for="(column, index) in props.row.computedColumns"
                                             :key="index"
                                             :label="column.label"
                                             :prop="column.prop"
                                             :width="column.minWidth"
                                             show-overflow-tooltip
                            />
                        </el-table>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="pid" align="center" prop="pid" v-if="false"/>


        </el-table>

    function getList() {
       
        getAllOperationData(请求参数).then(response => {
            if (200 == response.code) {
                const {data} = response;
                tracedBackList.length = 0;
                data.forEach(item=>{
                    item.children = [];
                    item.computedColumns = [];
                    tracedBackList.push(item);

                     // getDetailDataList(item);
                })
                total.value = response.data.length;
            }
        }).finally(() => {
            loading.value = false;
        });
    }

    function getDetailDataList (data){
        const param = {请求参数};
        getDetailData(param).then(response=>{
            if (200 == response.code) {
//默认全部加载

                <!-- data.children = response.data;
                data.computedColumns = Object.keys(response.data).map(key => ({ label: key, prop: key, minWidth:key.length > 5? key.length * 25:key.length * 40 }));
            -->
//单行点击加载
                data.children = [response.data];
                data.computedColumns = Object.keys(response.data).map(key => ({ label: key, prop: key, minWidth:key.length > 5? key.length * 25:key.length * 40 }));
            }
        }).finally(() => {
            loading.value = false;
        });
    }
//单行点击加载
  function handleExpandChange  (expandedRows, row, expanded) {
         getDetailDataList(expandedRows);

    };

以上分为两种，一种是在查询行数据时直接加载全部子数据，一种是每展开一行加载该行详细数据，本人较懒，没将两种代码分开展示，此稿只做笔记。