一、当动态切换el-table且用"{children: 'children', hasChildren: 'hasChildren'}"和row-key="id"组合展示树形结构的不显示子菜单的问题
<div class="change-type">
<div
@click="handleChangeScene('1')"
:class="[secenActive =='1'?'btn-active':'','type-name']"
>来这儿推广排名</div>
<div
@click="handleChangeScene('2')"
:class="[secenActive =='2'?'btn-active':'','type-name']"
>案场推广排名</div>
<div
@click="handleChangeScene('3')"
:class="[secenActive =='3'?'btn-active':'','type-name']"
>案场业务排名</div>
</div>
<div class="scene-box" v-if="secenActive == 1">
<el-table :data="appData" stripe style="width: 100%" border :height='tableHeight' ref="table" @sort-change="sortChange">
<el-table-column prop="name" label="项目名称" align="center"></el-table-column>
</el-table>
</div>
<div class="scene-box" v-if="secenActive == 2" >
<el-table :data="appData" stripe style="width: 100%" border :height='tableHeight' ref="table" @sort-change="sortChange" row-key="id" :tree-props="{children: 'children'}">
<el-table-column prop="name" label="项目名称" align="center" width='180'></el-table-column>
</el-table>
</div>
<div class="scene-box" v-if="secenActive == 3" >
<el-table :data="appData" stripe style="width: 100%" border :height='tableHeight' ref="table" @sort-change="sortChange" :tree-props="{children: 'children',hasChildren:'hasChildren'}" row-key="id">
<el-table-column prop="name" label="项目名称" align="center" fixed></el-table-column>
</el-table>
</div>
</div>
用此方法动态切换表格的时候用的v-if导致无论怎样处理后端返回的子集children都不会出现所谓的折叠菜单效果，这是因为v-if初始如果为false的时候是没有存在在dom树中的，将v-if用v-show代替就会解决，v-if与v-show的传送门其中就有相关知识点,效果图如下
image.png
=>
image.png
二、当多个el-table用v-if做动态切换的时候，设置的高度会变的问题解决办法
1、用elementUI中给定的el-table方法 dolayout(),可能会报错dolayout方法未找到,用以下方法完美解决
if(this.$refs.table){
this.$nextTick(()=>{
this.$refs.table.doLayout();
})
}
