Merge branch 'master' of ssh://192.168.1.113:10022/yifu-study/front/yifu-study-front-share

source/_posts/页面切走再切回，el-tabs组件无法重置或指定选中tab终极解决方案 .md

+---
+title: 页面切走再切回，el-tabs组件无法重置或指定选中tab终极解决方案         
+date: 2024/1/24 21:48:20
+tags:                    
+- 前端
+- elementUI
+- vue            
+author: 李燕         
+---
+
+最近在Vue2+elementUI项目开发中，遇到一个奇怪的问题。
+
+<!-- more -->
+
+某个页面写有el-tabs组件，对el-tabs进行操作，使得当前选中的tab为第二个tab（即activeName='1'），页面切走，再切回来，重置activeName的值(即activeName='0'），但是页面上选中的tab仍为第二个tab。
+
+代码写法如下：
+
+
+```js
+<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的值，但是和上述监听路由的方式一样不生效。就想着在页面打开的时候如果处理不了，是否可以在页面销毁的时候进行处理呢？然后就写下了如下代码：
+
+```js
+destroyed() {
+  this.activeName = '0'
+}
+```
+结果一试是可以的。
+
+但是这个方案有个缺点，那就是只能重置，不能在页面打开时，指定选中哪个tab。
+
+### **方案二**: 改变name命名
+
+因为页面有缓存，才导致页面切走再切回时保留了上次操作痕迹。那么我们去掉这个缓存，不就不会保留上次操作痕迹了。
+
+去掉缓存最简单的方法，就是改变name命名。
+
+上述代码中，有缓存的name命名如下：
+
+
+```js
+ name:'TaskList',
+```
+
+更改后，无缓存的name命名如下：
+
+```js
+ name:'TaskLis',
+```
+
+这样处理是可以的，但是和第一个方案存在相同的缺点，那就是只能重置，不能在页面打开时，指定选中哪个tab。
+
+### **方案三**: 弃用el-tab组件，自己写一个
+
+既然el-tabs在使用过程中有问题，又找不到完美的解决办法，那就只能弃用，自己写一个了。
+代码如下：
+ 
+```js
+<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了。
+