vue element-ui 侧边栏 和tabs 标签卡,绑定关联

2022-07-14 14:15:40

vue element-ui 侧边栏 和tabs 标签卡,绑定关联

实现效果:
请添加图片描述

思路:

点击侧边栏 添加 tabs 标签函数 : tab_click
点击 tabs 标签 返回: tab_click
关闭 tabs 标签函数: removeTab
1. 添加时候判断,tabs标签里是否已经 包含此标签,有就跳转,无就添加跳转
2. 移除的时候,tabs -1 选中状态也回到上一个 tabs 标签

3.解决刷新重置:
	tabs 标签卡重置,使用  sessionStorage 存储 tabs列表 和 选中状态。
	刷新的时候后,判断本地有没有  sessionStorage.sessTabs  和 sessionStorage.sessTabsValue ,有就给其赋值,保持刷新还存在。
	 	sessionStorage.sessTabs = JSON.stringify(this.editableTabs);
	    sessionStorage.sessTabsValue = JSON.stringify(this.editableTabsValue);
4.用户退出登录时候,清空 tabs列表 和 选中状态,
5.
1. 添加侧边栏

for循环,渲染出页面

<el-container><!-- 侧边栏 --><el-aside:width="isCollapse ?'60px' :' 180px'"><!-- :default-active="active" --><el-menuclass="el-menu-vertical-demo"background-color="#d3dce6":default-active="active"router:collapse="isCollapse":collapse-transition="false"><componentv-for="value in leftMenu.navList":key="value.title + value.url":index="value.url":is="
                value.children && value.children.length > 0
                  ?'el-submenu'
                  :'el-menu-item'"@click="toTab(value.title, value.url)"><!-- 当有子元素时,隐藏本条父元素的渲染 --><templatev-if="value.children == null || value.children.length < 0"><img:src="value.icon"/><span>{{ value.title }}</span></template><!-- //子循环 --><templatev-if="value.children && value.children.length > 0"><templateslot="title"><img:src="value.icon"/><span>{{ value.title }}</span></template><el-menu-itemv-for="v in value.children":key="v.title + v.url":index="v.url"@click="toTab(v.title, v.url)"style="font-size: 12px"><img:src="v.icon"/><spanslot="title">{{ v.title }}</span></el-menu-item></template></component></el-menu></el-aside><!-- 上边标签 (与侧边栏关联) --><el-container><el-main><el-tabsv-model="editableTabsValue"type="border-card"closable@tab-remove="removeTab"@tab-click="tab_click"><el-tab-panev-for="item in editableTabs":key="item.name":label="item.title":name="item.name":disabled="item.name =='0'"><labelslot="label":class="item.icon"v-if="item.name ==='0'"@click="xxx()"></label><labelslot="label"v-else>{{ item.title }}</label></el-tab-pane></el-tabs><!-- 导航栏 --><router-view/></el-main><el-footer>联系电话:0101-****-****</el-footer></el-container></el-container>

准备工作,data

data(){return{// tab栏
      isCollapse:false,
      editableTabsValue:"1",//选中状态的 name
      editableTabs:[//默认存在的 tabs{
          icon:"el-icon-s-fold",
          path:"#",
          title:"折叠",
          name:"0",},{
          icon:"el-icon-suitcase",
          path:"homePage",
          title:"首页",
          name:"1",},],// 侧边栏
      active:"",
      leftMenu:{
        isCollapse:false,//navList: [],
        navList:[{
             icon:"el-icon-suitcase",
             path:"homePage",
             title:"首页",},{
            icon:require("../assets/images/cun.png"),
            url:"village",
             title:"村庄",},{// icon: "el-icon-office-building",
             icon:require("../assets/images/mans.png"),
             url:"person",
             title:"人口",},{// icon: "el-icon-office-building",
             icon:require("../assets/images/mans.png"),
             url:"map",
             title:"地图",}],},};},
2. 添加tabs 标签
3. 相关联起来

3.1 点击侧边栏 添加tabs 标签
3.1.1点击侧边栏 添加tabs 标签

//添加 tabs 标签页 ,传递的 name 是titletoTab(name, url){this.active= url;// console.log(name, url);//添加之前需要 判断是否已经包含,let isHave=false;for(let i=0; i<this.editableTabs.length; i++){if(this.editableTabs[i].title== name){//存在,包含
          isHave=true;this.editableTabsValue=this.editableTabs[i].name;}}if(isHave==false){this.editableTabs.push({
          title: name,
          name: name,
          content: name+ url,//用于测试,后边可以删除
          path: url,});this.editableTabsValue=this.editableTabs[this.editableTabs.length-1].name;}//本地存储值
      sessionStorage.sessTabs=JSON.stringify(this.editableTabs);
      sessionStorage.sessTabsValue=JSON.stringify(this.editableTabsValue);// console.log(sessionStorage.sessTabs);// console.log(sessionStorage.sessTabsValue);},

3.1.2 移除tabs 标签

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];//下一个 next 打开的页面,有就下一个,没就上一个if(nextTab){
              activeName= nextTab.name;this.active= nextTab.path;this.$router.push(nextTab.path);}}});}this.editableTabsValue= activeName;this.editableTabs= tabs.filter((tab)=> tab.name!== targetName);//本地存储值
      sessionStorage.sessTabs=JSON.stringify(this.editableTabs);
      sessionStorage.sessTabsValue=JSON.stringify(this.editableTabsValue);},
3.2 点击 tabs 标签,跳转相应路由,选中状态
tab_click(tab){let url=this.editableTabs[tab.index].path;if(this.$router.currentRoute.name!== url){this.active= url;this.$router.push(url);}//存储选中状态this.toTab(this.editableTabs[tab.index].title, url);},3.3
4. 解决刷新时

,tabs 标签卡重置,使用 sessionStorage 存储 tabs列表 和 选中状态。
sessionStorage.sessTabs = JSON.stringify(this.editableTabs);
sessionStorage.sessTabsValue = JSON.stringify(this.editableTabsValue);

  • 作者:好多达不溜
  • 原文链接:https://blog.csdn.net/weixin_46531845/article/details/123519418
    更新时间:2022-07-14 14:15:40