一黎做、當(dāng)動態(tài)切換el-table且用"{children: 'children', hasChildren: 'hasChildren'}"和row-key="id"組合展示樹形結(jié)構(gòu)的不顯示子菜單的問題
<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']"
>案場業(yè)務(wù)排名</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="項(xiàng)目名稱" 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="項(xiàng)目名稱" 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="項(xiàng)目名稱" align="center" fixed></el-table-column>
</el-table>
</div>
</div>
用此方法動態(tài)切換表格的時(shí)候用的v-if導(dǎo)致無論怎樣處理后端返回的子集children都不會出現(xiàn)所謂的折疊菜單效果，這是因?yàn)関-if初始如果為false的時(shí)候是沒有存在在dom樹中的抬探，將v-if用v-show代替就會解決润歉，v-if與v-show的傳送門其中就有相關(guān)知識點(diǎn),效果圖如下
image.png
=>
image.png
二鱼炒、當(dāng)多個(gè)el-table用v-if做動態(tài)切換的時(shí)候叶撒，設(shè)置的高度會變的問題解決辦法
1、用elementUI中給定的el-table方法 dolayout(),可能會報(bào)錯(cuò)dolayout方法未找到,用以下方法完美解決
if(this.$refs.table){
this.$nextTick(()=>{
this.$refs.table.doLayout();
})
}
