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>