按钮权限控制

搜索关键字:

自定义指令传参| +"自定义指令"+"dataset"|自定义指令dataset| +"Vue"+"directives"|vue按钮权限实现

1、完整代码:

<template>

    <div>

        <el-breadcrumb separator-class="el-icon-arrow-right">

            <el-breadcrumb-item>报表管理</el-breadcrumb-item>

            <el-breadcrumb-item>折线图</el-breadcrumb-item>

        </el-breadcrumb>

        <el-card>

            <el-row type="flex" justify="center" style="margin-top:20px">

                <el-col :push="12" :span="12">

                    <el-button type="primary" v-btnOp = "{name:'BtnAdd',loadOps:ops}">新增</el-button>

                    <el-button type="success" v-btnOp = "{name:'BtnExp',loadOps:ops}">导出</el-button>

                    <el-button type="info" v-btnOp = "{name:'BtnPrint',loadOps:ops}">打印</el-button>

                    <el-button type="warning" v-btnOp = "{name:'BtnShare',loadOps:ops}">分享</el-button>

                </el-col>

            </el-row>

        </el-card>

    </div>

</template>

<script>

export default {

    data() {

        return {

            // 用户ID

            userpx: '',

            // 页面ID

            pageID: '',

            // 操作权限加载标志

            loaded: false,

            // 操作权限

            ops: []

        }

    },

    created() {

        this.getUserIDPageID();

    },

    methods: {

        // 获取登录用户ID+页面ID

        getUserIDPageID() {

            this.pageID = this.$route.query.id;

            console.log("页面ID",this.pageID);

            if(sessionStorage.getItem("user") !== null) {

                let user = JSON.parse(sessionStorage.getItem("user"));

                this.userpx = user.id;

                console.log("用户ID",this.userpx);

            }

        },

        // 加载操作权限

        loadAssignedOps() {

            this.$axios.get("/api/operation/assignedops",{

                params: {

                    userpx: this.userpx,

                    pageID: this.pageID

                }

            })

            .then( res => {

                console.log("获取操作权限返回数据:",res.data);

                this.ops = res.data.data;

                console.log("看一下操作数组ops:",this.ops);

                console.log("包括BtnShare:",this.ops.includes("BtnShare"));

            })

            .catch( function(error) {

                console.log(error);

            });

        }

    },

    watch: {

        userpx: function(data) {

            if(this.loaded) {

                return;

            }            

            console.log("userpx有值了:,在看一下this.pageID",data,this.pageID);

            if(this.pageID ) {

                this.loaded = true;

                this.$nextTick( () => {

                    this.loadAssignedOps();

                })                

            }

        },

        pageID: function(data) {

            if(this.loaded) {

                return;

            }

            console.log("pageID有值了:,再看一下this.userpx",data,this.userpx);

            if(this.userpx) {

                this.loaded = true;

                this.$nextTick( () => {

                    this.loadAssignedOps();                    

                })                

            }

        }

    },

    directives: {

        "btnOp": {

            componentUpdated: function(el,binding,vnode) {

                console.log("改进之后binding.value.name",binding.value.name);

                console.log("改进之后binding.value.loadOps",binding.value.loadOps)

                let ops = binding.value.loadOps;

                console.log("看一下Ops是否包括按钮值:",ops.includes(binding.value.name),binding.value.name);

                if( ops != null && !ops.includes(binding.value.name)) {

                    el.parentNode.removeChild(el);

                }

            }

        }

    }

}

</script>

<style lang="scss" scoped>

.el-breadcrumb {

    margin-bottom: 15px;

    font-size: 12px;

}

.el-card {

    box-shadow: 0 1px 1px rgba(0,0,0,0.15);

}

</style>

2、后台接口"/api/operation/assignedops"

返回实际数据:

[

    "BtnShare",

    "BtnExp",

    "BtnPrint"

]

3、判断页面按钮是否在返回值里面

<el-button type="success" v-btnOp = "{name:'BtnExp',loadOps:ops}">导出</el-button>

4、效果图:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/105735.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

taro h5 formData上传图片的坑-Required request part ‘file‘ is not present

描述&#xff1a;用formData上传图片 1、生成formData const formData new FormData() formData.append(file, data) // data是file formData.append(xxx, xxx) // 添加其他参数2、用taro.request请求 Taro.request({url: xxxx,data: formData,header: {Content-Type: mult…

16、Flink 的table api与sql之连接外部系统: 读写外部系统的连接器和格式以及Elasticsearch示例(2)

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…

cortex-A7核PWM实验--STM32MP157

实验目的&#xff1a;驱动风扇&#xff0c;蜂鸣器&#xff0c;马达进行工作 目录 一&#xff0c;PWM相关概念 有源蜂鸣器和无源蜂鸣器 二&#xff0c;分析电路图&#xff0c;框图 三&#xff0c;分析RCC章节 1&#xff0c;确定总线连接 2&#xff0c;根据总线内容确定基…

Python案例|Matplotlib库实现的数据分析

数据展示是数据分析和挖掘中的重要环节&#xff0c;通过图形的形式可以直观、清晰地呈现数据内在的规律。 本文所用数据采用上一篇案例实现后的数据表&#xff0c;数据存储在newbj_lianJia.csv文件中&#xff0c;具体代码如下。 import pandas as pd #导入库 import matplot…

Linux安装Redis数据库,无需公网IP实现远程连接

文章目录 1. Linux(centos8)安装redis数据库2. 配置redis数据库3. 内网穿透3.1 安装cpolar内网穿透3.2 创建隧道映射本地端口 4. 配置固定TCP端口地址4.1 保留一个固定tcp地址4.2 配置固定TCP地址4.3 使用固定的tcp地址连接 Redis作为一款高速缓存的key value键值对的数据库,在…

AI 时代,程序员无需焦虑 | 《服务端开发:技术、方法与实用解决方案》(文末送书福利4.0)

文章目录 &#x1f4cb;前言&#x1f3af;程序员会被 AI 取代么&#xff1f;&#x1f3af;服务端开发尚难被 AI 取代&#x1f3af; 服务端开发何去何从&#xff1f;&#x1f3af;业界首部体系化、全景式解读服务端开发的著作&#x1f4ac;读者对象&#x1f4da;本书优势&#x…

Vue3学习

Proxy和definedProperty对比 Proxy 作为新标准将受到浏览器厂商重点持续的性能优化。Proxy 不兼容IE&#xff0c;也没有 polyfill, defineProperty 能支持到IE9。Proxy 能观察的类型比 defineProperty 更丰富。Object.definedProperty 是劫持对象的属性&#xff0c;新增元素需…

FPGA应用于图像处理

FPGA应用于图像处理 FPGA&#xff08;Field-Programmable Gate Array&#xff09;直译过来就是现场可编程门阵列。是一种可以编程的逻辑器件&#xff0c;具有高度的灵活性&#xff0c;可以根据具体需求就像编程来实现不同的功能。 FPGA器件属于专用的集成电流中的一种半定制电…

适配小程序隐私保护指引设置

由于小程序发布了一个公告&#xff0c;那么接下来就是怎么改简单的问题了。毕竟不太想大的改动历史上的代码。尽量简单的适配隐私策略就可以了。 整体思路也是参考现在App普遍的启动就让用户同意隐私策略&#xff0c;不同意不让用&#xff0c;同意了之后才能够继续使用。 公告…

SpringBoot入门篇1 - 简介和工程创建

目录 SpringBoot是由Pivotal团队提供的全新框架&#xff0c; 其设计目的是用来简化Spring应用的初始搭建以及开发过程。 1.创建入门工程案例 ①创建新模块&#xff0c;选择Spring初始化&#xff0c;并配置模块相关基础信息 ②开发控制器类 controller/BookController.jav…

第P2周:彩色图片识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 我的环境&#xff1a; 语言环境&#xff1a;Python3.10.7编译器&#xff1a;VScode深度学习环境&#xff1a;TensorFlow 2.13.0 一、前期工作&#xff1a; …

2023京东酒类市场数据分析(京东数据开放平台)

根据鲸参谋平台的数据统计&#xff0c;今年7月份京东平台酒类环比集体下滑&#xff0c;接下来我们一起来看白酒、啤酒、葡萄酒的详情数据。 首先来看白酒市场。 鲸参谋数据显示&#xff0c;7月份京东平台白酒的销量为210万&#xff0c;环比下滑约49%&#xff1b;销售额将近19…

前端工程化之规范化

规范化是我们践行前端工程化中重要的一部分。 为什么要有规范化标准 俗话说&#xff0c;无规矩不成方圆&#xff0c;尤其是在开发行业中&#xff0c;更是要有严谨的工作态度&#xff0c;我们都知道大多数软件开发都不是一个人的工作&#xff0c;都是需要多人协同的&#xff0…

2023MySQL+MyBatis知识点整理

文章目录 主键 外键 的区别&#xff1f;什么是范式&#xff1f;什么是反范式&#xff1f;什么是事务&#xff1f;MySQL事务隔离级别&#xff1f;MySQL事务默认提交模式&#xff1f;MySQL中int(1)和int(10)的区别MySQL 浮点数会丢失精度吗&#xff1f;MySQL支持哪几种时间类型&a…

矢量调制分析基础

前言 本文介绍VSA 的矢量调制分析和数字调制分析测量能力。某些扫频调谐频谱分析仪也能通过使用另外的数字无线专用软件来提供数字调制分析。然而&#xff0c;VSA 通常在调制格式和解调算法配置等方面提供更大的测量灵活性&#xff0c;并提供更多的数据结果和轨迹轨迹显示。本…

nginx(七十八)nginx配置http2

一 ngx_http_v2模块 1、本文不讲解HTTP2的知识2、只讲解nginx中如何配置HTTP2 ① 前置条件 1、openssl的版本必须在1.0.2e及以上2、开启https加密,目前http2.0只支持开启了https的网站编译选项&#xff1a;--with-http_ssl_module --with-http_v2_module 特点&#xff1a…

W6100-EVB-PICO进行UDP组播数据回环测试(九)

前言 上一章我们用我们的开发板作为UDP客户端连接服务器进行数据回环测试&#xff0c;那么本章我们进行UDP组播数据回环测试。 什么是UDP组播&#xff1f; 组播是主机间一对多的通讯模式&#xff0c; 组播是一种允许一个或多个组播源发送同一报文到多个接收者的技术。组播源将…

【文心一言】如何申请获得体验资格,并简单使用它的强大功能

目录 一、文心一言1.1、它能做什么1.2、技术特点1.3、申请方法 二、功能体验2.1、文心一言2.2、写冒泡排序代码 测试代码2.3、画一个爱心2.4、画一个星空 三、申请和通过3.1、申请时间3.2、通过时间 文心一言&#xff0c;国内首个大型人工智能对话模型&#xff0c;发布已经快一…

AndroidStudio升级后总是Read Time Out的解决办法

AndroidStudio升级后在gradle的时候总是Time out&#xff0c;遇到过多次&#xff0c;总结一下解决办法 1、gradle下载超时 在工程目录../gradle/wrapper/gradle-wrapper.properties中找到gradle版本的下载链接&#xff0c;如下图&#xff1a; 将其复制到迅雷里下载&#xff0…

让eslint的错误信息显示在项目界面上

1.需求描述 效果如下 让eslint中的错误&#xff0c;显示在项目界面上 2.问题解决 1.安装 vite-plugin-eslint 插件 npm install vite-plugin-eslint --save-dev2.配置插件 // vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue import e…