首页 > 其他分享 >VUE3 el-Menu + tabs 联动

VUE3 el-Menu + tabs 联动

时间:2024-08-01 11:27:17浏览次数:16  
标签:el const name tabs Menu value newVal tab

我们在项目中会有这种情况,根据点击侧边栏的菜单,来动态实现右侧tabs的增减,那么这种效果怎么实现呢

1.模板部分

<el-menu :collapse="isCollapse" active-text-color="#ffd04b" background-color="#242424"
  class="el-menu-vertical-demo" :default-active="onRoutes" text-color="#fff" :router="true"
  :unique-opened="true" :collapse-transition="true"  ><MenuTree:menuList="userStore.menuRouters"></MenuTree>
                </el-menu>
   <!-- 内容展示区 -->
        <div class="layout_main">

            <el-tabs v-model="editableTabsValue" type="card" class="demo-tabs" closable @tab-remove="removeTab"
                @tab-click="clickBtn">
                <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
                    <Main></Main>
                </el-tab-pane>
            </el-tabs>
            <!-- <Main></Main> -->
        </div>

2.方法部分

import { ref, computed, inject, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute()
onMounted(() => {
    router.push({ name: 'Home' });
})
// 面包屑导航动态删减
const editableTabs = ref([
    {
        title: '首页',
        name: 'Home',
        path: '/home'
    }
])
const editableTabsValue = ref('Home')
const removeTab = (targetName) => {
    const tabs = editableTabs.value;
    let activeName = editableTabsValue.value;

    if (tabs.length === 2) { // 检查是否只剩一个标签页
        activeName = 'Home'; // 设置为首页
        router.push({ name: 'Home' }); // 跳转到首页
    } else if (activeName === targetName) {
        tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
                const nextTab = tabs[index + 1] || tabs[index - 1];
                if (nextTab) {
                    activeName = nextTab.name;
                }
            }
        });
    }

    editableTabsValue.value = activeName;
    editableTabs.value = tabs.filter(tab => tab.name !== targetName);
    router.push({ name: activeName });
}

const clickBtn = (tab) => {
    router.push({ name: tab.props.name })
}

watch(route, (newVal) => {
    const exists = editableTabs.value.some(tab => tab.name === newVal.name)
    if (!exists && newVal.name !== 'home') {
        editableTabs.value.push({
            title: newVal.meta.title,
            name: newVal.name,
            path: newVal.path
        })
    }
    editableTabsValue.value = newVal.name
})

效果如下:

项目地址:https://github.com/jiaokaihang/vite_project.giticon-default.png?t=N7T8https://github.com/jiaokaihang/vite_project.git

  npm install

  

  npm run dev

喜欢的小伙伴github点个start   如有问题请联系qq 2096864475

标签:el,const,name,tabs,Menu,value,newVal,tab
From: https://blog.csdn.net/qq_65949679/article/details/140843090

相关文章

  • telegraf 常用命令总结
    本文为博主原创,转载请注明出处:Telegraf是一个灵活的服务器代理,用于收集和报告指标。它支持插件驱动,这意味着你可以根据需要添加或修改功能。1.使用telegraf--help查看telegraf提供的相关命令和参数使用telegraf--help可以查看telegraf提供的相关命令和参数,具体如......
  • 信步漫谈之Android——HelloWorld
    目录目标1资源2第一个HelloWorld程序3项目结构说明3.1目录结构3.2结构说明4在App中添加日志后续补充参考资料目标学习搭建Android的开发环境sayhelloworld1资源官网教程:https://developer.android.com/courses开发工具AndroidStudio下载路径:https://d......
  • 【Dash】Dash链接 csv/excel 文件
    一、Dash如何连接csv数据?Thereareamanywaystoadddatatoanapp:APIs,externaldatabases,local.txt files,JSONfiles,andmore.Inthisexample,wewillhighlightoneofthemostcommonwaysofincorporatingdatafromaCSVsheet.#Importpackages......
  • 信步漫谈之微信小程序——HelloWorld
    目录目标1资源2程序目录说明3第一个HelloWorld程序4真机调试参考资料(感谢)目标微信小程序开发环境sayhelloworld1资源微信官方文档:https://developers.weixin.qq.com/doc/微信开发者工具下载:https://developers.weixin.qq.com/miniprogram/dev/devtools/downloa......
  • 63.Selenium框架
    Selenium框架【一】浏览器操作1)页面操作1.初始化浏览器对象#使用环境变量fromseleniumimportwebdriverbrowser=webdriver.Chrome()browser=webdriver.Chrome(path)browser.close() #关闭浏览器#使用绝对路径fromselenium.webdriver.chrome.serviceimport......
  • 62.Xpath与Selenium
    【一】xpath1)介绍(XMLPathLanguage)一种小型的查询语言2)优点可在XML中查询支持HTML的查询通过元素和属性进行导航#安装pipinstalllxml#使用fromlxmlimportetree#将源码转化为能被XPath匹配的格式selector=etree.HTML(源码)#返回为一列表selector.xpat......
  • 题解:Pinely Round 4 (Div. 1 + Div. 2) C
    C.AbsoluteZerotimelimitpertest:2secondsmemorylimitpertest:256megabytesinput:standardinputoutput:standardoutputYouaregivenanarray\(a\)of\(n\)integers.Inoneoperation,youwillperformthefollowingtwo-stepmove:Choose......
  • 3.校验,格式化,ModelSerializer使用
    【一】反序列化校验1)三层校验字段自己校验直接写在字段类的属性上局部钩子在序列化中写validata_字段名全局钩子#serializers.pyclassBookSerializer(serializers.Serializer):#1)name字段的要大于1小于10name=serializers.CharField(min_length=......
  • E. Level Up
    E.LevelUp题意玩家初始等级为\(1\),有\(n\)只怪物,每个怪物有一个等级\(a_i\),如果怪物等级高于你,则你们会战斗,战斗后经验加1,否则怪物会逃跑,你不会获得经验,每k点经验就会升级。给你\(q\)个询问,给个询问给出\(i,x\),问你当\(k=x\)时,会不会发生战斗(即问你你的等级......
  • SemanticKernel/C#:检索增强生成(RAG)简易实践
    检索增强生成(RAG)是什么?RAG是“Reference-basedGenerativemodelwithAttention”的缩写,也可以被称为“Retrieval-AugmentedGeneration”,是一种结合了检索技术和生成模型的方法,主要用于自然语言处理任务,如文本生成、对话系统、机器翻译等。RAG模型通过从外部知识库中检索相关......