el-table 遇到的问题一

点击按钮一,出现table1

点击按钮二,出现table2

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

 <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>

相关推荐

  1. el-table 遇到问题

    2024-04-20 23:38:03       31 阅读
  2. docker部署ES遇到问题

    2024-04-20 23:38:03       37 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-20 23:38:03       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-20 23:38:03       100 阅读
  3. 在Django里面运行非项目文件

    2024-04-20 23:38:03       82 阅读
  4. Python语言-面向对象

    2024-04-20 23:38:03       91 阅读

热门阅读

  1. 使用JWT、Redis + token实现用户登录的两种方式。

    2024-04-20 23:38:03       31 阅读
  2. Android 13 有线以太网静态ip保存逻辑梳理分析

    2024-04-20 23:38:03       28 阅读
  3. 使用Python实现超参数调优

    2024-04-20 23:38:03       34 阅读
  4. Swift知识点 --- AnyView

    2024-04-20 23:38:03       39 阅读
  5. hyref 开发者推荐项目

    2024-04-20 23:38:03       35 阅读
  6. React Flow浏览器默认事件失效问题解决

    2024-04-20 23:38:03       32 阅读
  7. npm 更改国内镜像的方法

    2024-04-20 23:38:03       38 阅读
  8. 等保测评:网络安全法规框架下的关键合规实践

    2024-04-20 23:38:03       39 阅读
  9. vue--样式绑定--样式切换方法

    2024-04-20 23:38:03       28 阅读