vue2通过权限控制tab标签显示和隐藏

vue2通过权限控制tab标签显示和隐藏

  • 1、前言
  • 2、v-if实现自定义控制

1、前言

  1. 在开发过程中,我们可能会遇到这样一个场景:根据不同权限对tab栏内容进行控制,这时候用自定义指令v-permission就达不到我们想要的效果,其是将当前节点的子元素进行移除,此时当前节点依然存在,如下图所示。
  2. 这时候就需要利用v-if自定义控制,其思路实:v-if中执行一个函数,函数传入一个权限值。在函数中判断权限值是否属于权限菜单内,返回布尔类型值。
<el-tab-pane label="负荷跟踪" name="first" v-permissions="['load_track']"><load-tracking ref="loadTrackingRef" :childStationId="childStationId" />
</el-tab-pane>

在这里插入图片描述

2、v-if实现自定义控制

<template><div class="content"><el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane label="负荷跟踪" name="first" v-if="checkPermissionArr(['load_track'])"><load-tracking v-if="activeName == 'first'" ref="loadTrackingRef" :childStationId="childStationId" /></el-tab-pane><el-tab-pane label="功率跟踪" name="second" v-if="checkPermissionArr(['power_track'])"><power-tracking v-if="activeName == 'second'" ref="powerTrackingRef" :childStationId="childStationId" /></el-tab-pane><el-tab-pane label="数据曲线分析" name="third" v-if="checkPermissionArr(['data_analysis'])"><curve-analysis v-if="activeName == 'third'" ref="curveAnalysisRef":childStationId="childStationId"></curve-analysis></el-tab-pane></el-tabs>
</template>
<script>
import { checkPermissionArr } from '@/utils/permission' // 权限判断函数export default{methods: {checkPermissionArr}
}
</script>
// src/utils/permission.js
/*** 字符权限校验* @param {Array} value 校验值* @returns {Boolean}*/
export function checkPermissionArr (value) {if (value && value instanceof Array && value.length > 0) {let permissionIds = store.getters['acl/permission']// console.log(permissionIds)const permissionArr = valueconst hasPermission = permissionIds.some(permission => {return permissionArr.includes(permission)})if (!hasPermission) {return false}return true} else {console.error('暂无权限')return false}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/180224.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图书管理系统源码,图书管理系统开发,图书借阅系统源码整体功能演示

用户登录 基础资料 操作员管理 超期罚金设置 读者分类 读者管理 图书分类 图书管理 图书借还管理 图书借取 图书还去 图书借还查询 读者借书排行 用户登录 运行View目录下Login文件夹下的Index.csthml出现登录界面&#xff0c;输入用户名密码分别是admin密码admin12…

IDEA删除的文件怎么找回更新

一、 查找本地历史记录IDEA在进行代码版本管理时&#xff0c;会自动创建本地历史记录&#xff0c;如果我们误删了文件&#xff0c;可以通过查找本地历史记录来找回文件。 1.在项目中&#xff0c;选中被删文件的父级目录&#xff0c;“File”->“Local History”->“Show…

智能优化算法应用:基于头脑风暴算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于头脑风暴算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于头脑风暴算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.头脑风暴算法4.实验参数设定5.算法结果6.参考…

Linux:文件系统初步理解

文章目录 文件的初步理解C语言中对文件的接口系统调用的接口位图的理解open调用接口 文件和进程的关系进程和文件的低耦合 如何理解一切皆文件&#xff1f; 本篇总结的是关于Linux中文件的各种知识 文件的初步理解 在前面的文章中有两个观点&#xff0c;1. 文件 内容 属性&…

算法通关村-----数据流的中位数

数据流的中位数 问题描述 中位数是有序整数列表中的中间值。如果列表的大小是偶数&#xff0c;则没有中间值&#xff0c;中位数是两个中间值的平均值。 例如 arr [2,3,4] 的中位数是 3 。 例如 arr [2,3] 的中位数是 (2 3) / 2 2.5 。 实现 MedianFinder 类: MedianFin…

yolov8-seg 分割推理流程

目录 一、分割检测 二、图像预处理 二、推理 三、后处理与可视化 3.1、后处理 3.2、mask可视化 四、完整pytorch代码 一、分割检测 注&#xff1a;本篇只是阐述推理流程&#xff0c;tensorrt实现后续跟进。 yolov8-pose的tensorrt部署代码稍后更新&#xff0c;还是在仓…

探索数字化转型项目的基础

从消费品到特种化学品&#xff0c;数字化转型正在各行各业中逐渐普及。然而&#xff0c;尽管使用智能化设备、连接解决方案和数据分析对改造升级制造运营模式有巨大帮助&#xff0c;但起步过程&#xff08;奠定一个良好的基础来支撑工厂的可访问性、可靠性、可维护性、可扩展性…

java中IO知识点概念

这里写自定义目录标题 内存中的数据以电子信号的形式表示&#xff0c;而磁盘中的数据是以磁场的方向表示。1.流的分类2.File类3.流的API 关键4.理解缓冲的作用-一次性多拿些读写文件的时候为什么要有缓冲流 -意义是什么缓冲流的使用 5.路径问题6.文件的创建7.内存和磁盘存储本质…

【3D程序软件】SideFX与上海道宁一直为设计师提供程序化 3D动画和视觉效果工具,旨在创造高质量的电影效果

Houdini是一个 从头开始构建的程序系统 使艺术家能够自由工作 创建多次迭代 并与同事快速共享工作流程 Houdini FX为 视觉特效艺术家创作故事片 广告或视频游戏 凭借其基于程序节点的工作流程 Houdini FX可让 您更快地创建更多内容 从而缩短时间并 在所有创意任务中…

ESP Multi-Room Music 方案:支持音频实时同步播放 实现音乐互联共享

项目背景 随着无线通信技术的发展&#xff0c;针对不同音频应用领域的无线音频产品正不断涌现。近日&#xff0c;乐鑫科技推出了基于 Wi-Fi 的多扬声器互联共享音乐通信协议——ESP Multi-Room Music 方案。该方案使用乐鑫自研的基于 Wi-Fi 局域网的音频同步播放技术&#xff…

51单片机使用串口查看程序执行的数据

51单片机使用串口查看程序执行的数据 1.概述 这篇文章介绍利用串口输出程序执行的数据&#xff0c;辅助我们调试程序&#xff0c;提高代码定位问题的效率。 2.硬件电路原理 3.串口助手查看程序数据 输出串口数据的方式分为CPU查询方式和中断方式。他们各有优缺点&#xff0…

源码剖析 Spring Security 的实现原理

Spring Security 是一个轻量级的安全框架&#xff0c;可以和 Spring 项目很好地集成&#xff0c;提供了丰富的身份认证和授权相关的功能&#xff0c;而且还能防止一些常见的网络攻击。我在工作中有很多项目都使用了 Spring Security 框架&#xff0c;但基本上都是浅尝辄止&…

Java 8 中 ReentrantLock 与 Synchronized 的区别

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…

《微信小程序开发从入门到实战》学习三十五

4.2 云开发JSON数据库 4.2.3 权限控制 在云开发控制台可以对数据库中的数据进行操作&#xff0c; 在小程序端和云函数可以分别使用小程序API和服务端API对数据中的数据进行操作。 以上操作受到权限控制。 对数据库进行查询属于读操作&#xff0c;增删改操作属于写操作。 …

Day44力扣打卡

打卡记录 给小朋友们分糖果 II&#xff08;容斥原理 隔板法&#xff09; 链接 def c2(n):return n * (n - 1) // 2 if n > 1 else 0class Solution:def distributeCandies(self, n: int, limit: int) -> int:return c2(n 2) - 3 * c2(n - limit 1) 3 * c2(n - 2 * …

uniapp+微信小程序监听返回事件

代码附在最后 适用场景&#xff1a;uniapp开发微信小程序 需求是我点击列表进入数据信息的详情界面&#xff0c;点击详情界面的收藏&#xff0c;返回上一界面后&#xff0c;更新列表中的收藏情况。 目录 一、使用onUnload监听页面卸载 二、使用getCurrentPages()获取当前页…

【双指针】四数之和

四数之和 建议做过了解三数之和的思想再做这道题&#xff0c;思路是一样的~ 题目描述 18. 四数之和 - 力扣&#xff08;LeetCode&#xff09; 给你一个由 n 个整数组成的数组 nums &#xff0c;和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [num…

Java大型智慧工地APP云平台源码带AI智能识别功能

智慧工地为建筑全生命周期赋能&#xff0c;用创新的可视化与智能化方法&#xff0c;降低成本&#xff0c;创造价值。 一、智慧工地APP概述 智慧工地”立足于互联网&#xff0c;采用云计算&#xff0c;大数据和物联网等技术手段&#xff0c;针对当前建筑行业的特点&#xff0c;…

C语言 移位操作符

<< 左移操作符>> 右移操作符 注&#xff1a;移位操作符的操作数只能是整数。 移位操作符移动的是二进制位。 整数的二进制表示有3种&#xff1a; 原码反码补码 正的整数的原码、反码、补码相同。 负的整数的原码、反码、补码是要计算的。 由负整数原码计算出反…

编写安全 JavaScript 代码的最佳实践

编写安全 JavaScript 代码的最佳实践 JavaScript 的动态特性使其成为事实上的浏览器语言和世界上最流行的编程语言。 JS 最受欢迎的有用功能之一是即时分析。这意味着浏览器在下载内容的同时执行代码&#xff0c;这显然有其优势。然而&#xff0c;这种程度的自由也伴随着问题…