SpringBoot整合SpringSecurity实现权限控制(八):实现多标签页

系列文章目录
《SpringBoot整合SpringSecurity实现权限控制(一):实现原理》
《SpringBoot整合SpringSecurity实现权限控制(二):权限数据基本模型设计》
《SpringBoot整合SpringSecurity实现权限控制(三):前端动态装载路由与菜单》
《SpringBoot整合SpringSecurity实现权限控制(四):角色管理》
《SpringBoot整合SpringSecurity实现权限控制(五):用户管理》
《SpringBoot整合SpringSecurity实现权限控制(六):菜单管理》
《SpringBoot整合SpringSecurity实现权限控制(七):权限分配》


一、需求描述

多标签页 (Tabs) 的设计对于多窗口多任务管理有着无与伦比的高效率与方便性

  • 在上面的文章中已经实现了后台管理的基本权限功能,包括用户、角色、菜单管理及权限分配。
  • 用户通过单击侧边栏的菜单,就可以调出对应的功能页面进行使用。但在使用的过程中,我们发现程序只能在同一时间打开一个页面。我们更希望打开多个功能页面时,这些页面以标签的形式集成在同一个窗口显示,要想切换到某个页面或是关闭某个页面,我们只需要操作相应的标签即可,非常方便快捷。
    在这里插入图片描述

二、前端实现

  1. 使用element tabs组件搭建基础的多标签页,示例如下:
<template>
  <div class="tabbar-container">
    <el-tabs v-model="pageCurrent" type="card" closable @tab-click="tabChange" @tab-remove="removeTab">
      <el-tab-pane
        v-for="(item) in pageList"
        :key="item.name"
        :name="item.name"
        class="tabbar-item"
      >
        <span slot="label">
          <span><i :class="item.icon" />{
   
   { }} {
   
   { item.label }}</span>
        </span>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

在这里插入图片描述
2. 监控路由变化情况,将路由信息与tabs panel列表进行关联

  watch: {
    
    
    $route: {
    
    
      handler(to, form = null) {
    
    
        // 当路由改变时,检测该路由是否已经在打开的页面之中,如果不在,就添加进去
        if (to.meta) {
    
    
          this.pageCurrent = to.path
          var index = this.pageList.findIndex(value => {
    
    
            return value.name === to.path
          })
          if (index < 0) {
    
    
            this.pageList.push({
    
     name: to.path, label: to.meta.title, icon: to.meta.icon })
          }
        }
      },
      immediate: true
    }
  },
  1. 增加移除tab页与切换tab页事件
  methods: {
    
    
    // 移除tab页
    removeTab(targetName) {
    
    
      if (targetName === '/dashboard') return
      const tabs = this.pageList
      let activeName = this.pageCurrent
      if (activeName === targetName) {
    
    
        tabs.forEach((tab, index) => {
    
    
          if (tab.name === targetName) {
    
    
            const nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
    
    
              activeName = nextTab.name
            }
          }
        })
      }
      this.pageCurrent = activeName
      this.pageList = tabs.filter(tab => tab.name !== targetName)
      this.$router.push({
    
     path: activeName })
    },
    // 切换标签页
    tabChange(tab, event) {
    
    
      this.$router.push({
    
     path: tab.name })
    }
  }
  1. 在布局主界面中加入多标签组件
<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <div :class="{
     
     'fixed-header':fixedHeader}">
        <navbar />
        <!-- 加入多标签组件 -->
        <tabbar />
      </div>
      <app-main />
    </div>
  </div>
</template>

<script>
import {
      
       Navbar, Sidebar, AppMain, Tabbar } from './components'
...
</script>

三、效果演示

在这里插入图片描述

四、源码

猜你喜欢

转载自blog.csdn.net/jpgzhu/article/details/121246865
今日推荐