当前位置：首页 > news >正文

项目练习：若依系统二次开发中，某些情况下，v-hasPermi不适合的解决办法

news 2025/7/20 8:14:52

一、情景描述

像下面这种情况，你只能屏蔽了 <quantity/>组件，但是，不能影藏el-tab-pane页签。
而我们想要的是，影藏el-tab-pane页签及其内容。

  <el-tabs type="card">
      <el-tab-pane label="计量单位" v-hasPermi="['rent:basicinfo:preserve:quantity:list']" >
        <quantity/>
      </el-tab-pane>
</el-tabs>

二、解决办法

1、Vue2写法

使用checkPermi + v-if实现

<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>

2、Vue3写法

Vue3中，因为有setup语法糖，所以，不需要在methods中注册函数。

import { checkPermi } from "@/utils/permission.js";

function check(arr) {
  return checkPermi(arr);
}

<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <!-- 修改按钮 -->
          <el-button v-if="check(['unit:xxx:edit'])" link type="primary" icon="Edit"
            @click="handleUpdate(scope.row)">
            修改
          </el-button>
          <!-- 查看按钮 -->
          <el-button v-else link type="primary" icon="View" @click="handleUpdate(scope.row)">
            查看
          </el-button>
          <!-- 删除按钮 -->
          <el-button v-hasPermi="['unit:xxx:remove']" link type="primary" icon="Delete"
            @click="handleDelete(scope.row)">
            删除
     </el-button>
  </template>
</el-table-column>