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,一经查实,立即删除!

相关文章

如何利用PyTorch?

上一篇文章介绍了“What is PyTorch?”,本篇文章探讨一下“How to use PyTorch?” 1、PyTorch PyTorch 是一个开源机器学习库,基于 Torch 库开发,主要由 Facebook 的人工智能研究实验室(FAIR)研发。它是一个强大且灵…

【备忘】thinkphp5.1之websocket长连接框架使用流程简述

前言 本文纯属经验备注,有许多地方未进行测试,请勿照搬,仅供参考。 之前专门花了几天时间测试了websocket,当时只记得踩了许多坑,但是没有对测试流程进行记录,导致长时间未使用从而无从下手。 今天就简单…

08.Elasticsearch应用(八)

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

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

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

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

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

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

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

2024年第四届机器人与人工智能国际会议(JCRAI 2024) | Ei、Scopus双检索

会议简介 Brief Introduction 2024年第四届机器人与人工智能国际会议(JCRAI 2024) 会议时间:2024年8月9日-11日 召开地点:中国上海 大会官网:www.jcrai.org 人工智能和机器人技术在过去几十年里得到了长足的发展,为未来的机器人应…

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 的二维整数数…

2024年华为OD机试真题-靠谱的车-Python-OD统一考试(C卷)

题目描述: 程序员小明打了一辆出租车去上班。出于职业敏感,他注意到这辆出租车的计费表有点问题,总是偏大。 出租车司机解释说他不喜欢数字4,所以改装了计费表,任何数字位置遇到数字4就直接跳过,其余功能都正常。 比如: 1. 23再多一块钱就变为25; 2. 39再多一块…

yum找不到 mysql-server

User sudo yum install mysql-server 已加载插件&#xff1a;fastestmirror Loading mirror speeds from cached hostfile base: mirrors.aliyun.comepel: mirror.01link.hkextras: mirrors.ustc.edu.cnupdates: mirrors.ustc.edu.cn 没有可用软件包 mysql-server。 错误&…

C++算法学习心得七.贪心算法(2)

1.跳跃游戏&#xff08;55题&#xff09; 题目描述&#xff1a; 给定一个非负整数数组&#xff0c;你最初位于数组的第一个位置。 数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个位置。 示例 1: 输入: [2,3,1,1,4]输出: true解释: 我们…

【前端基础--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;我们通常也称这个过程为“数据打宽“。 数据打宽在流处理系统中对应的操作便…

34.在排序数组中查找元素的第一个和最后一个位置(力扣LeetCode)

文章目录 34.在排序数组中查找元素的第一个和最后一个位置题目描述二分 34.在排序数组中查找元素的第一个和最后一个位置 题目描述 给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组…

将小游戏打包成单一exe文件的原理及应用

哈喽大家好&#xff0c;我是咕噜美乐蒂&#xff0c;很高兴又见面啦&#xff01;本文将介绍将小游戏原版文件打包成单一exe文件的原理&#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;…