权限来控制按钮显隐。

实现:我们需要自定义指令来控制

  1. 新建一个文件btnOption.js
  import Vue from 'vue'
  Vue.directive('has ', {
      inserted: function (el, binding) {
          let str = binding.value.split(':')[0];
          let strMenu = binding.value.split(':')[1];
          let strBtn = binding.value.split(':')[2];
          //最终的结果需要是
           el.parentNode.removeChild(el);
  })

  //如果不是按钮,而是要隐藏某个页签可以使用自定义属性,通过v-if判断
  Vue.prototype.$has = function (value) {
      //最终的结果需要是boolean类型
      return false    
  }

  1. main.js
import '@/utils/btnOption.js'

  1. 使用方法
<el-button  v-has="'system:config:add'">新增</el-button>

<el-tab-pane  label="配置"  v-if="$has('system:config:peizhi')"></el-tab-pane>