关于 2.15.14版本element-ui的el-tabs在切换时出现闪动的原因和解决方法

2.15.14版本element-ui的el-tabs在切换时出现闪动的原因和解决方法

1.问题原因

今天在做vue2项目练习的时候发现了这个问题，先看template部分代码

<el-tabs v-model="message">
      <el-tab-pane :label="`未读消息(${unread.length})`" name="first">
          <el-table :data="unread" :show-header="false" style="width: 100%">
              <el-table-column>
                  <template v-slot="scope">
                      <span class="message-title">{{scope.row.title}}</span>
                  </template>
              </el-table-column>
              <el-table-column prop="date" width="180"></el-table-column>
              <el-table-column width="120">
                  <template v-slot="scope">
                      <el-button size="small" @click="handleRead(scope.$index)">标为已读</el-button>
                  </template>
              </el-table-column>
          </el-table>
          <div class="handle-row">
              <el-button type="primary" @click="handleAllRead">全部标为已读</el-button>
          </div>
      </el-tab-pane>

      <el-tab-pane :label="`已读消息(${read.length})`" name="second">
              <el-table :data="read" :show-header="false" style="width: 100%">
                  <el-table-column>
                      <template v-slot="scope">
                          <span class="message-title">{{scope.row.title}}</span>
                      </template>
                  </el-table-column>
                  <el-table-column prop="date" width="150"></el-table-column>
                  <el-table-column width="120">
                      <template v-slot="scope">
                          <el-button type="danger" @click="handleDel(scope.$index)">删除</el-button>
                      </template>
                  </el-table-column>
              </el-table>
              <div class="handle-row">
                  <el-button type="danger" @click="handleAllDel">删除全部</el-button>
              </div>
      </el-tab-pane>
  </el-tabs>

运行之后便出现了点击切换tab栏，内容出现闪动的效果，观感很差，研究一番之后，发现是因为用了el-table标签导致的，而且这个问题并没有出现在之前版本的element-ui中，究竟是什么原理本人小白不懂。。。

2.解决方案

以下是三种不同的解决方法，欢迎补充 !

• 第一种：使用template标签包裹el-tab-pane的内容，并且加上v-if指令来判断是否为当前tab，如下

<el-tab-pane :label="`已读消息(${read.length})`" name="second">
     <template v-if="message === 'second'">
             <el-table :data="read" :show-header="false" style="width: 100%">
                 <el-table-column>
                     <template v-slot="scope">
                         <span class="message-title">{{scope.row.title}}</span>
                     </template>
                 </el-table-column>
                 <el-table-column prop="date" width="150"></el-table-column>
                 <el-table-column width="120">
                     <template v-slot="scope">
                         <el-button type="danger" @click="handleDel(scope.$index)">删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>
             <div class="handle-row">
                 <el-button type="danger" @click="handleAllDel">删除全部</el-button>
             </div>
         </template>
 </el-tab-pane>

• 第二种：在el-table标签中加入 :key="Math.random()",如下

<el-tab-pane :label="`已读消息(${read.length})`" name="second">
       <el-table :data="read" :show-header="false" style="width: 100%" :key="Math.randow()">
              <el-table-column>
                  <template v-slot="scope">
                      <span class="message-title">{{scope.row.title}}</span>
                  </template>
              </el-table-column>
              <el-table-column prop="date" width="150"></el-table-column>
              <el-table-column width="120">
                  <template v-slot="scope">
                      <el-button type="danger" @click="handleDel(scope.$index)">删除</el-button>
                  </template>
              </el-table-column>
          </el-table>
          <div class="handle-row">
              <el-button type="danger" @click="handleAllDel">删除全部</el-button>
          </div>
 </el-tab-pane>

• 第三种：通过自定义指令解决，这种方法比较复杂，有兴趣的可以点击这位大佬的原文进行阅读，这里不再做介绍
  https://blog.csdn.net/xiaobaige6084/article/details/130213316