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>
相关推荐
你的电影很有趣16 分钟前
lesson77:Vue组件开发指南:从基础使用到高级通信
javascript·vue.js·1024程序员节
Mr.Jessy36 分钟前
JavaScript学习第六天:函数
开发语言·前端·javascript·学习·html·1024程序员节
oak隔壁找我1 小时前
JavaScript 模块化演进历程:问题与解决方案。
前端·javascript·架构
烟袅2 小时前
JavaScript 变量声明报错指南:var、let、const 常见错误解析
javascript
烟袅2 小时前
告别 var!深入理解 JavaScript 中 var、let 和 const 的差异与最佳实践
javascript·面试
mapbar_front2 小时前
Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
W.Buffer4 小时前
设计模式-单例模式:从原理到实战的三种经典实现
开发语言·javascript·单例模式
Mintopia5 小时前
深度伪造检测技术在 WebAIGC 场景中的应用现状
前端·javascript·aigc
BUG_Jia5 小时前
如何用 HTML 生成 PC 端软件
前端·javascript·html·桌面应用·1024程序员节
皓月Code5 小时前
第二章、全局配置项目主题色(主题切换+跟随系统)
javascript·css·react.js·1024程序员节