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>
相关推荐
Magicman2 小时前
JavaScript-事件学习
javascript
知识分享小能手2 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发
aidingni8884 小时前
掌握 TCJS 游戏摄像系统:打造动态影院级体验
前端·javascript
有梦想的攻城狮4 小时前
从0开始学vue:npm命令详解
前端·vue.js·npm
我是日安4 小时前
从零到一打造 Vue3 响应式系统 Day 23 - Watch:基础实现
前端·javascript·vue.js
FogLetter5 小时前
Map 与 WeakMap:内存管理的艺术与哲学
前端·javascript
前端伪大叔5 小时前
第15篇:Freqtrade策略不跑、跑错、跑飞?那可能是这几个参数没配好
前端·javascript·后端
xcg3401237 小时前
ElementUI-Table 表格实现行拖拽
elementui·table·行拖拽
課代表8 小时前
Acrobat DC 文本域表单验证中的 js 使用
javascript·正则表达式·表单验证·数据完整性·字段验证·事件对象·自定义验证