关于若依框架中v-hasRole/v-hasPermi作用到el-table-column中无法生效问题

最新推荐文章于 2024-07-23 09:12:06 发布

cyyyyyj_888

最新推荐文章于 2024-07-23 09:12:06 发布

阅读量3.1k

点赞数 3

文章标签： vue.js 前端 javascript

原文链接：https://gitee.com/y_project/RuoYi-Cloud/issues/I55SNZ

版权

在某些场景下，不适宜使用v-hasPermi指令，例如在元素标签组件中，应改用手动设置v-if配合全局权限判断函数checkPermi和checkRole来控制权限。此示例展示了如何在模板中根据不同的权限设置显示不同的TabPane。

摘要由CSDN通过智能技术生成

在某些情况下，它是不适合使用v-hasPermi，如元素标签组件，只能通过手动设置v-if。可以使用全局权限判断函数，用法和指令 v-hasPermi 类似。

<template>
  <el-tabs>
    <el-tab-pane v-if="checkPermi(['system:user:add'])" label="用户管理" name="user">用户管理</el-tab-pane>
    <el-tab-pane v-if="checkPermi(['system:user:add', 'system:user:edit'])" label="参数管理" name="menu">参数管理</el-tab-pane>
    <el-tab-pane v-if="checkRole(['admin'])" label="角色管理" name="role">角色管理</el-tab-pane>
    <el-tab-pane v-if="checkRole(['admin','common'])" label="定时任务" name="job">定时任务</el-tab-pane>
   </el-tabs>
</template>

<script>
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数

export default{
   methods: {
    checkPermi,
    checkRole
  }
}
</script>