SOURCE

//var { Button } = Element;
// 注册一个全局指令 `v-permission`
Vue.directive('permission', {
  inserted: function (el, binding, vnode) {
    const {value} = binding;
    const userRoles = ["10086","10087","10081"]
    if (value) {
      const theRole = value+'';
      const hasPermission = userRoles.includes(theRole)
      // const hasPermission = roles.some(role => {
      //   return userRoles.includes(role)
      // })
      if (!hasPermission) {
        return false
        //console.log(value,el.parentNode)
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  }
})

new Vue({
    el: '#app',
    //components: { Button },
    computed: {
        
    },
    data() {
        return {
            name: '通过指令控制权限',
          msg:'hello vue',
              see:true
        }
    },
    mounted() {
        //console.log("--22--")
    },
    methods: {
        onEachFeature() {
            //console.log("ss")
        }
    }
    
});

<div id="app">
 <h1 :title="name">权限</h1>
      <h4 v-show="see">{{msg}}</h4>
      <h2 v-if="!see">{{msg}}</h2>
      <h6 v-show="!see">{{msg}}</h6>
  <div class="map">
    <el-row>
      <el-button v-permission="10086">1.默认按钮</el-button>
      <el-button v-permission="10080" type="primary">2.主要按钮</el-button>
      <el-button type="success">3.成功按钮</el-button>
      <el-button type="info">4.信息按钮</el-button>
      <el-button type="warning">5.警告按钮</el-button>
      <el-button type="danger">6.危险按钮</el-button>
    </el-row>
    <el-row>
      <br />
      <el-tabs type="border-card">
        <el-tab-pane label="1.用户管理">用户管理____</el-tab-pane>
        <el-tab-pane label="2.配置管理" v-permission="1000">配置管理____</el-tab-pane>
        <el-tab-pane label="3.角色管理">角色管理____</el-tab-pane>
        <el-tab-pane label="4.定时任务补偿">定时任务补偿____</el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</div>

body{color:#ccc;}