若依 v-hasPermi 自定义指令失效场景

杨.某某2025-01-23 12:24

今天使用若依跟往常一样使用v-hasPermi 自定义指令的时候发现这个指令失效了，原因是和v-if指令一块使用，具体代码如下：

vue 复制代码

<el-button
            size="mini"
            type="text"
            icon="el-icon-edit-outline"
            v-hasPermi="['evaluation:user:his']"
            v-if="scope.row.approveStatus === '2'"
            @click="handleHis(scope.row)"
          >评分记录</el-button>

这个其实平常也是这么用的，但是今天突然发现有问题，刚开始以为是v-hasPermi失效了，然后debug了一下，发现其实v-hasPermi指令是生效的，已经移除el-button标签，但是此时有符合v-if所以该按钮有显示出来了...

解决方案一

把v-if替换为v-show

vue 复制代码

<el-button
            size="mini"
            type="text"
            icon="el-icon-edit-outline"
            v-hasPermi="['evaluation:user:his']"
            v-show="scope.row.approveStatus === '2'"
            @click="handleHis(scope.row)"
          >评分记录</el-button>

解决方案二

使用全局判断checkPermi([])函数做逻辑与操作。

vue 复制代码

<el-button
            size="mini"
            type="text"
            icon="el-icon-edit-outline"
            v-if="scope.row.approveStatus === '2' && checkPermi(['evaluation:user:his'])"
            @click="handleHis(scope.row)"
          >评分记录</el-button>