element+vue 之 v-limit 按钮操作权限

1.新建一个permission.js文件

在这里插入图片描述

import store from '@/store'export default {inserted: function (el, binding) {const { perms: limits } = store.state.userconst { value: params } = bindingif (!limits.length) returnif (params && Array.isArray(params)) {if (!limits.some(limit => params.includes(limit))) {el.parentNode && el.parentNode.removeChild(el)}} else {throw new Error(` format: v-limit="[ 'system:user:resetPwd' ]"`)}}
}

2.新建一个user.js 文件 存储用户权限标识集合

在这里插入图片描述

export default {state: {perms: JSON.parse(localStorage.getItem("perms")) || [], // 用户权限标识集合messageList: [], // 站内信header列表显示total: 0 // 站内信header显示},getters: {},mutations: {setPerms (state, perms) { // 用户权限标识集合localStorage.setItem("perms",JSON.stringify(perms))state.perms = perms},SET_MESSAGE_TOTAL (state, val) {state.total = val},SET_MESSAGE_LIST (state, val) {state.messageList = val}},actions: {GET_MESSAGE_LIST ({commit}, Form) {// selectMessage(Form).then(res => {//   // //   // if (res.data.code === 200) {//   //   commit('SET_MESSAGE_LIST', res.data.data.list)//   //   commit('SET_MESSAGE_TOTAL', res.data.data.total)//   // }// })}}
}
3.在store文件下的index.js进行引入
import Vue from 'vue'
import vuex from 'vuex'
import user from './modules/user'
Vue.use(vuex)
const store = new vuex.Store({modules: {user: user,}
})export default store
4.使用
 v-limit="['ForUnloading.CombinedOrder:Programme']"

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

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

相关文章

08.Elasticsearch应用(八)

Elasticsearch应用(八) 1.为什么需要相关性算分 我们在文档搜索的时候,匹配程度越高的相关性算分越高,算分越高的越靠前,但是有时候我们不需要算分越高越靠前我们可能需要手动影响算分来控制顺序比如广告&#xff08…

2016年认证杯SPSSPRO杯数学建模A题(第一阶段)洗衣机全过程文档及程序

2016年认证杯SPSSPRO杯数学建模 A题 洗衣机 原题再现: 洗衣机是普及率极高的家用电器,它给人们的生活带来了很大的方便。家用洗衣机从工作方式来看,有波轮式、滚筒式、搅拌式等若干种类。在此基础上,各厂商也推出了多种具体方案…

微信小程序(十五)自定义导航栏

注释很详细,直接上代码 上一篇 新增内容: 1.组件文件夹创建方法 2.自定义组件的配置方法 3.外部修改组件样式(关闭样式隔离或传参) 创建组件文件夹 如果是手动创建建议注意在json文件声明: mynav.json {//声明为组件可…

从CDN了解到的边缘计算与前端渲染

文章概叙 本文代码量较少,讲的是在云开发的基础上使用边缘计算的,代码量不高,​建议看完理解下就可以丢了,知道个概念就好。 废话1 第一次接触边缘计算是在2020年的时候,公司的cloud课程中,有一些相关概…

php二次开发股票系统代码:腾讯股票数据接口地址、批量获取股票信息、转换为腾讯接口指定的股票格式

1、腾讯股票数据控制器 <?php namespace app\index\controller;use think\Model; use think\Db;const BASE_URL http://aaaaaa.aaaaa.com; //腾讯数据地址class TencentStocks extends Home { //里面具体的方法 }2、请求接口返回内容 function juhecurl($url, $params f…

力扣刷题 第十二 边权重均等查询

现有一棵由 n 个节点组成的无向树&#xff0c;节点按从 0 到 n - 1 编号。给你一个整数 n 和一个长度为 n - 1 的二维整数数组 edges &#xff0c;其中 edges[i] [ui, vi, wi] 表示树中存在一条位于节点 ui 和节点 vi 之间、权重为 wi 的边。 另给你一个长度为 m 的二维整数数…

【前端基础--4】

定位属性 position 可以将元素定位到你想要放到位置&#xff0c;使用方位值来进行移动(top,left,right,bottom)。 1.相对定位 position: relative; top: 20px; left: 20px; 以自身为定点进行移动&#xff0c;不会脱离文档流。 不会影响元素本身的性质&#xff1b;块级…

性能优化-OpenCL 介绍

「发表于知乎专栏《移动端算法优化》」 本文首先对 GPU 进行了概述&#xff0c;然后着重地对移动端的 GPU 进行了分析&#xff0c;随后我们又详细地介绍了 OpenCL 的背景知识和 OpenCL 的四大编程模型。希望能帮助大家更好地进行移动端高性能代码的开发。 &#x1f3ac;个人简介…

RisingWave 多流 Join 实现高效实时数据打宽

在公司业务场景中&#xff0c;通常需要使用流计算引擎从多个数据源获取数据、进行 ETL 操作&#xff0c;并将清洗后的数据导入到数据分析系统或数据湖中。由于最后产生出来的表是一张宽表&#xff0c;我们通常也称这个过程为“数据打宽“。 数据打宽在流处理系统中对应的操作便…

Fiddler 过滤地址设置及导出JMeter脚本插件原理

Fiddler 过滤地址设置 1、在fiddler右边工具栏中找到Filters过滤器->勾选&#xff1a;Use Filters->在hosts中选择过滤规则和要过滤的地址。 如下图&#xff1a; 2、点击【Actions】按钮&#xff0c;选择&#xff1a;Run Filterset now&#xff0c;就会立即生效&#x…

nginx限制ip访问

先看一下被禁止的效果 如何配置 禁止访问的话直接在location模块增加类似如下配置 deny all; 完整示例 location / {deny all;root html;index index.html index.htm;} 默认是allow all就是允许所有ip访问,如果只配置指定ip可以访问是无效的,还是所有的ip可以访问 无效示例…

Unity动画桢事件

1&#xff0c;使用原因 在新项目内部审核的时候&#xff0c;说什么动画节奏不匹配&#xff0c;所以决定用动画桢事件来处理技能释放。当释放技能的时候&#xff0c;先播放技能动画&#xff0c;然后再动画桢所在的时间戳执行技能的逻辑。 2&#xff0c;具体实现 1&#xff0c;…

v3+ECharts 地图实现多个自定义图片的图标

备注&#xff1a;地图json, 图标图片 准备替换下 <template><div ref"mapEcharts" class"map-echart"></div> </template><script setup langts> import * as echarts from echarts import mapcity from "/tool/map/m…

【SpringBoot篇】springboot的自动装配原理

文章目录 &#x1f3f3;️‍&#x1f308;什么是自动装配&#x1f339;SpringBoot的自动装配&#x1f354;具体操作 &#x1f3f3;️‍&#x1f308;什么是自动装配 自动装配&#xff08;Auto-Configuration&#xff09;是Spring Boot框架的一个核心特性之一&#xff0c;它通过…

走进课本中的知名景区,猿辅导带你“读课文 游中国”

课本里&#xff0c;你能“看见”的世界不止一面&#xff0c;一座山川&#xff0c;崇高肃穆下孕育出千年的文明&#xff1b;一座桥梁&#xff0c;连接起时间的变迁和技术的传承&#xff1b;一座古楼&#xff0c;飞檐斗拱间凝聚着中国文化的精髓。近日&#xff0c;猿辅导素养课宣…

2024年新提出的算法:一种新的基于数学的优化算法——牛顿-拉夫森优化算法|Newton-Raphson-based optimizer,NRBO

1、简介 开发了一种新的元启发式算法——Newton-Raphson-Based优化器&#xff08;NRBO&#xff09;。NRBO受到Newton-Raphson方法的启发&#xff0c;它使用两个规则&#xff1a;Newton-Raphson搜索规则&#xff08;NRSR&#xff09;和Trap Avoidance算子&#xff08;TAO&#…

光电耦合隔离器在医疗行业的应用全面分析

光电耦合隔离器作为一种关键的电子元件&#xff0c;在医疗行业中扮演着重要的角色。光电耦合隔离器通过将电信号转换为光信号&#xff0c;并在隔离通道中传输&#xff0c;能够有效地隔离输入和输出端&#xff0c;保证医疗设备在电气上的安全性。 光电耦合隔离器的医疗应用领域 …

简述云原生基础定义及关键技术

云原生是什么 云原生是面向“云”而设计的应用,因此技术部分依赖于传统云计算的 3 层概念,基础设施即服务(IaaS)、平台即服务(PaaS)和软件即服务(SaaS)。 例如,敏捷的不可变基础设施交付类似于 IaaS,用来提供计算网络存储等基础资源,这些资源是可编程且不可变的,直…

【VBA代码解决方案】md文档转Word后,全自动转换为标准的Word公式格式

【VBA解决方案】全自动将Word中的文本公式转换为标准公式 写在最前面VBA代码全自动方法将md文档导出为word代码如何运行VBA代码注意事项 一些如何实现的回忆记录步骤解析手动将文本转换为Word公式代码逻辑步骤设想代码解析代码解释总结 其他背景介绍应用场景VBA脚本介绍如何使用…

【原创教程】轻松搞定川崎机器人调试

1、确定川崎机器人坐标系 机器人坐标系一般有以下四种&#xff1a;世界坐标&#xff08;大地坐标&#xff09;、基坐标、工具坐标、工件坐标。在前面的文章中&#xff0c;我们已经有所阐述&#xff0c;大家可以参考前面文章。 下面川崎以工具坐标系为例&#xff08;现场川崎机…