Vue element-admin权限控制之按钮使用

 /**
 * v-hasPermi 操作权限处理
 */

import store from '@/store'

 function checkPermission(el, binding) {
   const { value } = binding
   //通用权限测试用的偷懒的写法
   const all_permission = "*:*:*"; //此处定义的是权限的 格式：'system:sysUser:edit'
   const roles = store.getters && store.getters.permissions
   if (value && value instanceof Array) {
     if (value.length > 0) {
       const permissionRoles = value
       const hasPermission = roles.some(role => {
       	//这里如果是包含 或者 是上面的通配符号就放行显示（当然 生产环境是不能加这个通配符的）
         return all_permission === role || permissionRoles.includes(role)
       })

       if (!hasPermission) {
         el.parentNode && el.parentNode.removeChild(el)
       }
     }
   } else {
     throw new Error(`need roles! Like v-permission="['admin','editor']"`)
   }
 }

 export default {
 	//被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
   inserted(el, binding) {
     checkPermission(el, binding)
   },
   // 被绑定元素所在的模板更新时调用，而不论绑定值是否变化
   update(el, binding) {
     checkPermission(el, binding)
   }
 }

import permission from './hasPermi'
const install = function(Vue) {
  Vue.directive('permission', permission)
}
/**
 * 按钮权限
 */
if (window.Vue) {
  window['permission'] = permission
  Vue.use(install); // eslint-disable-line
}

permission.install = install
export default permission

<template slot-scope="scope">
          <el-button type="text" size="small"
                     icon="el-icon-edit"
                     v-permission="['system:sysUser:edit']"
                     @click="updateInfo(scope.row)">修改</el-button>
</template>