elementui后台管理系统遇到的问题 el-table（三）

一、当动态切换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();
  })
}

2、用v-show代替v-if

posted @ 2020-08-26 11:53  color_小浣熊  阅读(1324)  评论(0)  编辑  收藏  举报
百度