国外ps教程网站/百度大数据分析工具

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>