半路接手的项目中用到很多v-permission,知道是控制权限的,没了解具体流程,最近接到列表列级别的权限控制需求,跟了一下代码,分享一下

首先来看看v-permission干了什么

1、结构赋值拿到传过来的vaule

2、获取getter中的roles,可以看见我的roles里并没有 ibTaskAuto:onlyRead 这个角色

roles信息是在我们登录后通过vuex保存的

3、通过对比,如果roles中有value值,返回true;否则移除该元素。通过父节点移除而不直接使用removeNode(),因为removeNode方法不兼容部分浏览器。

但这样实际上也有坑,因为有的元素可能找不到父节点,可以看这篇v-if与permisson结合的方式控制权限

展示结果

可以看到,因为没有权限,无法看到input框,实际我是想整列都看不见,el-table找不到对应的父节点控制失败,修改为v-if与permisson结合的方式控制权限

 自定指令义并使用指令

 

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐