【踩坑记】页面切走再切回，el-tabs组件无法重置或指定选中tab终极解决方案

最近在Vue2+elementUI项目开发中，遇到一个奇怪的问题。

某个页面写有el-tabs组件，对el-tabs进行操作，使得当前选中的tab为第二个tab（即activeName='1'），页面切走，再切回来，重置activeName的值(即activeName='0'），但是页面上选中的tab仍为第二个tab。

代码写法如下：

<template>
  <el-tabs v-model="activeName" @tab-click="tabChangeClick">
    <el-tab-pane label="待接受的" name="0"></el-tab-pane>
    <el-tab-pane label="待执行的" name="1"></el-tab-pane>
   </el-tabs>
</template>

<script>
export default {
  name:'TaskList',
  data() {
    return {
      activeName: '0'
    }
  }
  watch: {
    $route: function (newVal) {
      // 因为页面默认有缓存，所以通过监听路由的方式重置页面数据
      if (/task-manage\/sale-task-list/.test(newVal.path)) {
         this.activeName = '0'
      };
    },
  },
}
</script>
      

本来以为是el-tabs组件自身的bug,但目前只发现在上述场景中有问题，在其他场景下（比如说弹框打开重置activeName的值）就没有问题。

尝试找原因，但是始终未找到，不过在尝试的过程中，倒是找出了几种解决方案。

方案一: 在destroyed()中重置activeName的值

其实一开始试过在activated（）中重置activeName的值，但是和上述监听路由的方式一样不生效。就想着在页面打开的时候如果处理不了，是否可以在页面销毁的时候进行处理呢？然后就写下了如下代码：

destroyed() {
  this.activeName = '0'
}

结果一试是可以的。

但是这个方案有个缺点，那就是只能重置，不能在页面打开时，指定选中哪个tab。

方案二: 改变name命名

因为页面有缓存，才导致页面切走再切回时保留了上次操作痕迹。那么我们去掉这个缓存，不就不会保留上次操作痕迹了。

去掉缓存最简单的方法，就是改变name命名。

上述代码中，有缓存的name命名如下：

 name:'TaskList',

更改后，无缓存的name命名如下：

 name:'TaskLis',

这样处理是可以的，但是和第一个方案存在相同的缺点，那就是只能重置，不能在页面打开时，指定选中哪个tab。

方案三: 弃用el-tab组件，自己写一个

既然el-tabs在使用过程中有问题，又找不到完美的解决办法，那就只能弃用，自己写一个了。 代码如下：

<div class="tab-wrap">
  <div 
    v-for="item in tabOpts" 
    :key="item.name"
    :class="item.name===activeName? 'tab active-tab': 'tab'"
    @click="tabChangeClick(item)"
   >{{item.label}}</div>
</div>

这样调整过后，页面切走再切回来，通过操作activeName的值，既能重置也能指定选中tab了。