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

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

<el-buttonsize="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

<el-buttonsize="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([])函数做逻辑与操作。

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