最简单的Vue 按钮权限控制

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

将它挂载到实例上面

Vue.prototype.$_has = hasPermission

完成

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

感谢阅读，若是你有更好的实现方式，能够写在评论里面哦~~~

本文使用 mdnice 排版