Vue 按钮权限控制
关于vue按钮权限控制,最简单的不过与v-if。例如:
”v-if='scope.row.xxx === permission
大多数做法都是将判断命令挂载到Vue实例上。 除了使用v-if判断节点是否渲染,还有一种操作方式就是el.parentNode.removeChild(el)
本文讲一讲这两种的实现方式
先讲需求
- 需要对用户的增删改查权限做存储
- 在实际table中对用户的操作按钮进行隐藏或显示
开始
Vuex 存储permissionList
ps:此处的遍历只为处理后端返回数据
mainJs处理permissionList
将它挂载到实例上面
Vue.prototype.$_has = hasPermission
完成
在需要使用到权限控制的按钮中,仅需要在他的属性中加一条 v-if=$_has('permission')
实际上所有所有的按钮权限判断都是大同小异。都是很简单的if-else逻辑。要么在单独的页面中去写
v-if
,要么就全局处理函数。