el-table 遇到的问题一

点击按钮一,出现table1

点击按钮二,出现table2

刚开始很简单,就用简单的 v-if 添加,但是会出现问题,就是点击按钮一,会出现table1,点击按钮二,会出现table2,再点击按钮一的时候,table1中就有了table2的内容,这个时候,可以在el-table 的表头添加,key ,就好了

javascript 复制代码
 <el-table v-if="this.nodeLevel == 1" key="table1"  v-loading="listLoading" :data="list" :hasNO="false" @sort-change="sortChange" border>
          <el-table-column prop="plantId" label="调控云ID" width="150" align="center"/>
          <el-table-column prop="plantName" label="厂站名称" align="center"></el-table-column>
          <el-table-column prop="energyType" label="厂站类型" width="140" align="center"/>
          <el-table-column prop="voltageType" label="电压等级" width="120" align="center"/>
          <el-table-column prop="region" label="所属调度" width="120" align="center"/>
          <el-table-column prop="capcity" label="装机容量(MW)" width="120" align="center">
            <template slot-scope="scope">
              {{ parseFloat(parseFloat(scope.row.capcity).toFixed(2)) }}
            </template>
          </el-table-column>
          <el-table-column prop="bwCapacity" label="并网装机容量(MW)" width="140" align="center"></el-table-column>
          <el-table-column prop="bwVoltageType" label="并网变电站电压等级" width="150" align="center"/>
          <el-table-column prop="operateDate" label="投运日期" width="120" align="center"/>
          <el-table-column label="操作" align="center" fixed="right" width="120">
            <template slot-scope="scope">
              <el-button class="btn1" type="text" @click="addOrUpdateHandle(scope.row.id, true)">查看</el-button>
              <el-button class="btn1" type="text" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
              <el-button class="btn2" type="text" @click="handleDel(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
</el-table>

<el-table v-else  key="table2"   v-loading="listLoading"
                    :data="listPlantAndGen" :hasNO="false" @sort-change="sortChange"
                    border>
          <el-table-column prop="stName" label="厂站名称" align="center"></el-table-column>
          <el-table-column prop="name" label="机组名称" align="center"/>
          <el-table-column prop="mvaRate" label="额定电压(MW)" align="center"/>
          <el-table-column prop="operateDate" label="投运时间" align="center"/>
          <el-table-column prop="voltageOnline" label="并网变电站电压等级" align="center"/>
          <el-table-column prop="runningState" label="运行状态" align="center">
            <template slot-scope="scope">
              <span v-if="isNaN(scope.row.runningState)">{{ scope.row.runningState }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="120">
            <template slot-scope="scope">
              <el-button class="btn1" type="text" @click="addOrUpdateHandle(scope.row.id, true)">查看</el-button>
              <el-button class="btn1" type="text" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
              <el-button class="btn2" type="text" @click="handleDel(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
</el-table>
相关推荐
灵感__idea1 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
试图让你心动3 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_3 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数4 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8505 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的7 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀7 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce8 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript