vue按钮根据权限控制显示隐藏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于N

若轻云蔽月

3336人浏览 · 2020-09-07 09:33:39

若轻云蔽月 · 2020-09-07 09:33:39 发布

1.在main.js中添加以下代码

加在new vue之前

// 权限指令
Vue.directive('has', {
  bind: function (el, binding) {
    if (!Vue.prototype.$_has(binding.value)) {
      el.style.display = 'none'
    }
  }
})
// 权限检查方法
Vue.prototype.$_has = function (value) {
  let isExist = false
  //  获取拥有的权限
  let role= store.state.d2admin.user.info.role
  if (role=== value) {
    isExist = true
  }
  return isExist
}

2.在需要控制的按钮上加v-has:

<el-button v-has="parameter" style="float: right" @click="dialogForm(false)">新增</el-button>

parameter处是自己项目的权限标识

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^