最简单的Vue 按钮权限控制

3,251 阅读1分钟

Vue 按钮权限控制

关于vue按钮权限控制,最简单的不过与v-if。例如:v-if='scope.row.xxx === permission 大多数做法都是将判断命令挂载到Vue实例上。 除了使用v-if判断节点是否渲染,还有一种操作方式就是el.parentNode.removeChild(el)


本文讲一讲这两种的实现方式

先讲需求

  1. 需要对用户的增删改查权限做存储
  2. 在实际table中对用户的操作按钮进行隐藏或显示

开始

Vuex 存储permissionList

获取权限列表 ps:此处的遍历只为处理后端返回数据

mainJs处理permissionList

carbon
carbon

将它挂载到实例上面

Vue.prototype.$_has = hasPermission

完成

在需要使用到权限控制的按钮中,仅需要在他的属性中加一条 v-if=$_has('permission') 实际上所有所有的按钮权限判断都是大同小异。都是很简单的if-else逻辑。要么在单独的页面中去写 v-if,要么就全局处理函数。

感谢阅读,如果你有更好的实现方式,可以写在评论里面哦~~~