vue2通过权限控制tab标签显示和隐藏-编程知识

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

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

1、前言

在开发过程中，我们可能会遇到这样一个场景：根据不同权限对tab栏内容进行控制，这时候用自定义指令v-permission就达不到我们想要的效果，其是将当前节点的子元素进行移除，此时当前节点依然存在，如下图所示。
这时候就需要利用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}
}