elementUI tab切换页面光标仍然停留在上一个tab位置

一渊之隔

于 2021-06-29 16:19:03 发布

阅读量1.1k

点赞数 1

分类专栏： Vue elementUI 文章标签： vue elementui

本文链接：https://blog.youkuaiyun.com/qq_37263478/article/details/118336646

版权

当从首页跳转到使用ElementUI的Tab页面时，遇到光标停留在上一个Tab的问题，即使内容和高亮已更新。为解决此问题，可以采用延时加载的方法。在首页增加相应代码，并在子组件中做相应调整，确保从二级页面返回时能正确更新Tab的激活状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在首页增加跳转，第一次页面跳过后，光标留在第二个位置同时该tagview没有关掉，第二次从首页点击，对应功能调整，tab内容以及上面的颜色都变了，但是光标让仍然停留在上一个位置，如图所示：首页跳转同一个父组件，功能对应不同的tag子组件

首页功能

跳转的功能页

这里加了一个延时加载函数解决问题

首页需要添加的代码

  //监听首页跳转路由变化的传参
  watch: {
    $route(to, from) {
      if (from.path == "/dashboard") {
        setTimeout(() => {
          //延时加载解决下划线错位
          if (this.$route.query.activeName != undefined) {
            this.activeName = this.$route.query.activeName;
          }
        }, 800);
      }
    },
  },

从父组件进入二级页面从二级页面返回到相应的父组件tab

父组件 activename就是自己定义tabname传参：全部