一、當動態切換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的傳送門其中就有相關知識點,效果圖如下
=>
二、當多個el-table用v-if做動態切換的時候，設置的高度會變的問題解決辦法
1、用elementUI中給定的el-table方法 dolayout(),可能會報錯dolayout方法未找到,用以下方法完美解決
if(this.$refs.table){
this.$nextTick(()=>{
this.$refs.table.doLayout();
})
}