美文网首页
elementui移除tab报Avoided redundant

elementui移除tab报Avoided redundant

作者: 曾经很远未来很近 | 来源:发表于2021-05-25 11:40 被阅读0次

    0 环境

    • 系统环境:win10

    1 问题

    现在有4个标签页 当我从右往左(当前页)删除tab 没有任何异常 但当我删除用户管理 就会有报错提示 如图

    4个标签页 从右往左(当前页)删除tab 删除中间的标签页 具体报错

    2 解决

    参考文章

    一种在路由push是加异常处理 第二种修改移除标签方法里代码逻辑

    方案

    1 路由push异常处理

    // 确定没有其他的异常 可以这么玩 当然不建议这么做
    this.$router.push(url).catch(()=>{});
    

    2 修改移除标签方法里代码逻辑

    仔细看就会发现 当我们点击进入某个标签页 在删除当前页 就不会报错 找到移除tab的方法 删除if (activeName === targetName)这个判断 在调试 ok 收工

    removeTab(targetName) {
          let tabs = this.editableTabs;
          let activeName = this.editableTabsValue;
    
          if (activeName === targetName) {
            tabs.forEach((tab, index) => {
              if (tab.name === targetName) {
                let nextTab = tabs[index + 1] || tabs[index - 1];
                if (nextTab) {
                  activeName = nextTab.name;
                  // console.log("activeName===>",activeName)
                  // this.editableTabsValue = activeName;
                }
              }
            });
          }
    
          this.editableTabsValue = activeName;
          this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
    
          // this.$router.push({name: activeName}).catch(()=>{});
          this.$router.push({ name: activeName });
        }
    

    相关文章

      网友评论

          本文标题:elementui移除tab报Avoided redundant

          本文链接:https://www.haomeiwen.com/subject/aebqsltx.html