今天使用若依跟往常一样使用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>