vue通过自定义指令控制不同角色页面显示什么按钮

main.js中引入import ‘./plugins/button-check.js’

button-check.js’

import Vue from "vue"

// 在开发中,buttonList的相关数据都是后端给的
// 这里为了省事，直接写成了我所需要的数据格式,
// 你们需要根据后端返回的数据进行提取或直接使用,
// 使用了name标识,但建议用btn-code作为唯一标识，像id一样.

const buttonList = [
  { name: "编辑", permission: true }, // permission控制展示隐藏
  { name: "删除", permission: false }
]
//如果后端返回的可以存在混村，取出来sessionStorage.getItem
/**
 * 判断按钮是否有权显示
 * @param name
 * @returns {boolean}
 */
function isButtomShow(buttonList, name){
 // 根据name匹配唯一
  return buttonList.some(v => v.name && v.name === name && v.permission)
}

// 按钮存在且为true,则显示

Vue.directive('button-check',{
  inserted(el, binding, vnode) {
    const name = binding.value // 接受指令传入的值
    if(!isButtomShow(buttonList, name)){
      el.parentNode.removeChild(el) // 移除节点
    }
  }
})

使用

<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
        <div v-for="(btn,idx) in btns" :key="idx" class="btn">
      <!-- 传入了btn.name,将会在button-check中通过指令参数value获取到 -->
	      <el-button v-button-check="btn.name" :class="btn.className">{{btn.name}}</el-button>
	    </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btns: [
        { name: "编辑",className: "编辑" },
        { name: "删除",className: "删除" },
      ]
    }
  }
}
</script>
<style lang="less" scoped>

</style>