解决 el-tree setChecked 方法偶尔失效的方法

目前在大多数公司中,菜单的权限控制都是不可或缺的功能

在和后端配合做权限控制的时候不可避免的会用到  el-tree

然而这个组件本身带的坑不少

我们需要回显对应角色拥有的菜单,在不严格的模式下,父节点的选中会连带子节点的选中

如果 ,你使用的  setCheckedKeys  ,那么你的回显一定是不正确的

此时不得不用到另一个方法  setChecked   ,然后你会发现dom 刷新的时候   这个方法又失效了

原因是:dom树刷新了 ,使得树节点对应的treeId刷新了  

解决方法如下:在调用setChecked的方法外边包一层延时器(setTimeout)即可解决

<template><div class="app-container"><el-dialog title="权限管理" :visible.sync="menuRelationVis"><el-tree ref="menuTreeRef" :data="menuTreeData"node-key="id"show-checkbox:props="{label:'name',children:'children',isLeaf:'leaf'}"></el-tree><br><div style="display: flex;justify-content: center;"><el-button @click="menuRelationVis = false">取消</el-button><el-button type="primary" @click="submitMenuRelation">确认</el-button></div></el-dialog></div>
</template><script>import rolesApi from '@/api/roles.js'export default {data(){return{menuRelationVis:false,curRoleId:null,menuTreeData:[]}},methods:{async menuManage(id){this.menuRelationVis = truethis.curRoleId = idawait this.getMenuTreeData()await this.getHasMenuByRoleId(id)},getHasMenuByRoleId(id){rolesApi.queryRoleElement({roleId:id}).then(res=>{if(res.code === 0){console.log(this.$refs.menuTreeRef);res.data.forEach(val => {let a = setTimeout(()=>{this.$nextTick(() => {this.$refs.menuTreeRef.setChecked(val, true, false)clearTimeout(a)console.log('setChecked');})this.$forceUpdate()},100)})}else{this.$message.error(res.msg)}}).catch(err=>{this.$message.error('查询角色权限信息失败')})},submitMenuRelation(){let checkKeys = this.$refs.menuTreeRef.getCheckedKeys()let halfCheckKeys = this.$refs.menuTreeRef.getHalfCheckedKeys()rolesApi.relatedElement({roleId: this.curRoleId,elementIds: checkKeys.concat(halfCheckKeys)}).then(res=>{if(res.code === 0){this.menuRelationVis = falsethis.$message.success('修改角色权限成功')}else{this.$message.error(res.msg)}}).catch(err=>{this.$message.error('修改角色权限失败')})}}}
</script>

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

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

相关文章

mybatisplus开启sql打印的三种方式

1、在application.yml文件中添加mybatisplus的配置文件 使用mybatisplus自带的log-impl配置&#xff0c;可以在控制台打印出sql语句、执行结果的数据集、数据结果条数等详细信息&#xff0c;这种方法适合再调试的时候使用&#xff0c;因为这个展示的信息详细&#xff0c;更便于…

【算法练习Day25】 重新安排行程N 皇后 解数独

​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;练题 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 重新安排行程N 皇后解数独总…

C# Socket通信从入门到精通(2)——多个同步TCP客户端C#代码实现

前言: 我们在开发Tcp客户端程序的时候,有时候在同一个软件上我们要连接多个服务器,这时候我们开发的一个客户端就不够使用了,这时候就需要我们开发出来的软件要支持连接多个服务器,最好是数量没有限制,这样我们就能应对任意数量的服务器连接,由于我们开发的Tcp客户端程…

使用 Visual Studio Code (VS Code) 作为 Visual C++ 6.0 (VC6) 的编辑器

使用 Visual Studio Code (VS Code) 作为 Visual C 6.0 (VC6) 的编辑器 由于一些众所周知的原因&#xff0c;我们不得不使用经典&#xff08;过时&#xff09;的比我们年龄还大的已有 25 年历史的 VC 6.0 来学习 C 语言。而对于现在来说&#xff0c;这个经典的 IDE 过于简陋&a…

Leetcode1833. 雪糕的最大数量

Every day a Leetcode 题目来源&#xff1a;1833. 雪糕的最大数量 解法1&#xff1a;贪心 排序 本题唯一的难点在于计数排序。 计数排序详解&#xff1a;C算法之计数排序 为了尽可能多的买到雪糕&#xff0c;我们选择从价格低的雪糕开始买&#xff0c;统计能够买到的雪糕…

Java学习_day03_变量数据类型运算符

文章目录 变量定义声明赋值使用简化 数据类型基本数据类型整型浮点型布尔型字符型空型 引用数据类型数据类型转换自动类型转换强制类型转换 运算符算术运算符赋值运算符比较运算符逻辑运算符位运算符条件运算符一元运算符二元运算符三元运算符运算符优先级 变量 变量类似于数学…

计算机算法分析与设计(12)---贪心算法(最优装载问题和哈夫曼编码问题)

文章目录 一、最优装载问题1.1 问题表述1.2 代码编写 二、哈夫曼编码2.1 哈夫曼编码概述2.2 前缀码2.3 问题描述2.4 代码思路2.5 代码编写 一、最优装载问题 1.1 问题表述 1. 有一批集装箱要装上一艘载重量为 c c c 的轮船&#xff0c;已知集装箱 i ( 1 ≤ i ≤ n ) i(1≤i≤…

【C++】假设给类分配的是栈的空间,那么计算机是如何访问栈中不同位置的对象的数据的呢?

2023年10月22日&#xff0c;周日上午 当在栈上创建一个对象时&#xff0c;计算机会为该对象分配一块连续的内存空间。该内存空间的位置在栈帧中&#xff0c;栈帧是用来存储函数调用信息和局部变量的一块内存区域。 栈帧中包含一个指针&#xff0c;称为栈指针&#xff08;stack…

昇腾CANN 7.0 黑科技:大模型训练性能优化之道

目前&#xff0c;大模型凭借超强的学习能力&#xff0c;已经在搜索、推荐、智能交互、AIGC、生产流程变革、产业提效等场景表现出巨大的潜力。大模型经过海量数据的预训练&#xff0c;通常具有良好的通用性和泛化性。用户基于“大模型预训练微调”开发范式即可在实际业务场景取…

MySQL——练习

MySQL 一、练习要求二、练习过程 一、练习要求 创建表并插入数据&#xff1a; 字段名数据类型主键外键非空唯一自增idINT是否是是否nameVARCHAR(50)否否是否否glassVARCHAR(50)否否是否否 sch 表内容 id name glass 1 xiaommg glass 1 2 xiaojun glass 21、创建一个可以统计…

dirsearch网站目录暴力破解

介绍&#xff1a; dirsearch是一个基于python3的命令行工具&#xff0c;常用于暴力扫描页面结构&#xff0c;包括网页中的目录和文件。相比其他扫描工具disearch的特点是&#xff1a; 支持HTTP代理多线程支持多种形式的网页&#xff08;asp,php&#xff09;生成报告&#xff0…

PostgreSQL与MySQL数据库对比:适用场景和选择指南

数据库是现代应用程序的基石之一&#xff0c;而在选择合适的数据库管理系统&#xff08;DBMS&#xff09;时&#xff0c;开发者常常会面临着许多选择。在这方面&#xff0c;PostgreSQL和MySQL是两个备受瞩目的选项。本文将深入研究这两者之间的异同&#xff0c;并为您提供适用场…

【使用OpenCV进行目标分割与计数的代码实例详解】

文章目录 概要实例一&#xff1a;硬币分割计数实例二&#xff1a;玉米粒分割计数 概要 在当今数字图像处理领域&#xff0c;图像分割技术是一项至关重要的任务。图像分割旨在将图像中的不同目标或区域准确地分开&#xff0c;为计算机视觉、图像识别和机器学习等领域提供了坚实…

[C语言]排序的大乱炖——喵喵的成长记

宝子&#xff0c;你不点个赞吗&#xff1f;不评个论吗&#xff1f;不收个藏吗&#xff1f; 最后的最后&#xff0c;关注我&#xff0c;关注我&#xff0c;关注我&#xff0c;你会看到更多有趣的博客哦&#xff01;&#xff01;&#xff01; 喵喵喵&#xff0c;你对我真的很重要…

【微服务 SpringCloud】实用篇 · Ribbon负载均衡

微服务&#xff08;4&#xff09; 文章目录 微服务&#xff08;4&#xff09;1. 负载均衡原理2. 源码跟踪1&#xff09;LoadBalancerIntercepor2&#xff09;LoadBalancerClient3&#xff09;负载均衡策略IRule4&#xff09;总结 3. 负载均衡策略3.1 负载均衡策略3.2 自定义负载…

C++前缀和算法的应用:向下取整数对和 原理源码测试用例

本文涉及的基础知识点 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 题目 向下取整数对和 给你一个整数数组 nums &#xff0c;请你返回所有下标对 0 < i, j < nums.length 的 floor(nums[i] / nums[j]) 结果之和。由于答案可能会…

Kubeadm部署k8s集群 kuboard

目录 主机准备 主机配置 修改主机名&#xff08;三个节点分别执行&#xff09; 配置hosts&#xff08;所有节点&#xff09; 关闭防火墙、selinux、swap、dnsmasq(所有节点) 安装依赖包&#xff08;所有节点&#xff09; 系统参数设置(所有节点) 时间同步(所有节点) 配…

(转)c 多张图片生成avi视频

https://www.cnblogs.com/songhe364826110/p/7619949.html 修改了几个参数&#xff0c;可以生成视频了。下载主要是为了学习avi视频格式。最后编一个摄像头生成视频的程序。 本程序把标准avi 视频格式的各种数据结构自定义在文件头(JpegAVI.h)中&#xff0c;所以就不用去下载…

Java面试题-UDP\TCP\HTTP

UDP UDP特性 &#xff08;1&#xff09;UDP是无连接的&#xff1a;发送数据之前不需要像TCP一样建立连接&#xff0c;也不需要释放连接&#xff0c;所以减少了发送和接收数据的开销 &#xff08;2&#xff09;UDP 使用尽最大努力交付&#xff1a;即不保证可靠交付 &#xff0…

Java开发规范记录

不要使用 count(column)或 count(1)来替代 count(*)&#xff0c;count(*)是 SQL92 定义的 标准统计行数的语法&#xff0c;跟数据库无关&#xff0c;跟 NULL 和非 NULL 无关。 注意&#xff1a;count(*)会统计值为 NULL 的行&#xff0c;而 count(列名)不会统计此列为 NULL 值的…