使用el-tree问题之清空勾数据不生效

news2024/9/29 21:29:10

一、问题场景描述

在做角色菜单按钮权限时,多数采用树结构勾选数据,这里使用了element中的el-tree。如下图:
1、我给角色1勾选了权限列表数据的前三行, 点击弹框的确定
请添加图片描述

2、紧接着点击角色2的权限按钮,给角色2分配修改权限数据(后三行是之前设置的 此刻回显的数据) 但是 当我点击角色2的权限按钮,弹出弹框时,角色1的数据 也渲染到树形结构上了。
请添加图片描述
3、此时我更多考虑的是 无非就是 无赋值时未清空上一次的数据 ,所以我接下来在 能初始化 数据的地方都设置了 如下代码
在这里插入图片描述
两个函数中 打印 this.checked 都是空了 但是页面 回显数据时依旧有哪个问题

console.log(this.checked)

4、此刻没什么想法 感觉是很简单的问题 也没好意思问同事,在我愁眉苦脸时,脑袋里浮现了一位姐姐,我询问她。
她说:你的 checked的数据是不是绑定在:default-checked-keys这个上?
我一看我上面引入的代码还真是,代码如下:

    <el-dialog title="权限列表" :visible.sync="dialogPvVisible" :close-on-click-modal = "false" :before-close="handleClose" :show-close = false>
      <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2">
        <el-form-item prop="AccessMenu" :label-width="formLabelWidth">
          <el-tree
            ref="tree"
            :data="ruleForm2.AccessMenu"
            :props="defaultProps"
            show-checkbox
            node-key="menuId"
            class="permission-tree"
            @check="currentChecked"
            :default-checked-keys="checked"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm2('ruleForm2')">取 消</el-button>
        <el-button type="primary" @click="submitForm2('ruleForm2')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

她又说:那你清空肯定不行呀,还是要调用这棵树本身的清空方法,因为那个只是默认展示的数据,再次点击,组件缓存了,当然组件选中的子节点也缓存了,所以你还是得调用tree本身的清空方法进行清空
5、调用 tree本身 setCheckedKeys 清空方法
在这里插入图片描述

 // 设置菜单 确定按钮
    submitForm2(formName2) {
      this.$refs[formName2].validate(async (valid) => {
        if (valid) {
          let res = await rolePower({
            roleId: this.roleId,
            menuIds: this.checked.toString(),
          });
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "设置成功",
            });
            this.SetCheckedKeys()
            this.dialogPvVisible = false;
          }
         
        } else {
          console.log("error sumbit");
        }
      });
    },
    // tree自身的清空方法
    SetCheckedKeys() {
        this.$refs.tree.setCheckedKeys([]);
    },

就这么简单,唉!

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

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

相关文章

Lvs +keepalivede : 高可用集群

keepalived为Ivs应运而生的高可用服务。Ivs的调度器无法做高可用&#xff0c;于是keepalived这个软件。 实现的是调度器的高可用。 但是: keepalived不是专为Ivs集群服务的&#xff0c;也可以做其他代理服务器的高可用。 lvs的高可用集群&#xff1a;主调度器和备调度器&#…

[springboot源码分析]-Conditional

https://www.baeldung.com/spring-conditional-annotations Condition元数据 1 org.springframework.context.annotation.Conditional 1.1Conditional定义 Target({ElementType.TYPE, ElementType.METHOD}) Retention(RetentionPolicy.RUNTIME) Documented public interface…

区块链技术在现代商业中的应用:打造透明与信任的新经济体系

区块链技术以其独特的不可篡改和去中心化特点&#xff0c;在全球范围内受到了广泛的关注和讨论。从金融、供应链管理到版权保护和身份验证&#xff0c;区块链技术正在逐步改变着传统商业运营模式&#xff0c;为企业和消费者带来更加透明、安全和高效的商业环境。本文将深入探讨…

计算机网络第一章笔记

b站深入浅出计算机网络 微课视频 第一章 概述 因特网概述 区别&#xff1a; 若干节点和链路互连形成网络若干网络通过路由器互连形成互连网&#xff08;互联网&#xff09;因特网是当今世界上最大的互联网 发展的三个阶段&#xff1a; 1969年&#xff0c;第一个分组交换网…

MQTT协议和边缘计算

1.基本概念 MQTT是基于TCP/IP协议栈构建的异步通信消息协议&#xff0c;是一种轻量级的发布、订阅信息传输协议。可以在不可靠的网络环境中进行扩展&#xff0c;适用于设备硬件存储空间或网络带宽有限的场景。使用MQTT协议&#xff0c;消息发送者与接收者不受时间和空间的限制…

【AI视野·今日CV 计算机视觉论文速览 第273期】Mon, 23 Oct 2023

AI视野今日CS.CV 计算机视觉论文速览 Mon, 23 Oct 2023 Totally 73 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computer Vision Papers Using Human-like Mechanism to Weaken Effect of Pre-training Weight Bias in Face-Recognition Convolutional Neural N…

力扣每日一题62:不同路径

题目描述&#xff1a; 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少条不同的路径&#xff1f; 示例 1&#xff1a; 输入&#xff1a;m 3, n 7 输出&#xff1a;28 示例 2&#xff…

《红蓝攻防对抗实战》八.利用OpenSSL对反弹shell流量进行加密

前文推荐&#xff1a; 《红蓝攻防对抗实战》一. 隧道穿透技术详解《红蓝攻防对抗实战》二.内网探测协议出网之TCP/UDP协议探测出网《红蓝攻防对抗实战》三.内网探测协议出网之HTTP/HTTPS协议探测出网《红蓝攻防对抗实战》四.内网探测协议出网之ICMP协议探测出网《红蓝攻防对抗…

cmp云管平台专业厂商哪家好?有什么优势?

企业上云后&#xff0c;使用CMP云管平台就至关重要了&#xff0c;不仅方便云管理&#xff0c;还能节约云成本&#xff0c;还能保障云资源安全。但很多小伙伴不知道cmp云管平台专业厂商哪家好&#xff1f;有什么优势&#xff1f;这里就简单回答一下。 cmp云管平台专业厂商哪家好…

【QT】其他常用控件2

新建项目 lineEdit 什么都不显示&#xff08;linux password&#xff09; password textEdit和plainTextEdit spinBox和doubleSpinBox timeEdit、dateEdit、dateTimeEdit label 显示图案&#xff0c;导入资源&#xff1a;【QT】资源文件导入_复制其他项目中的文件到qt项目中_St…

医学图像分割利器:U-Net网络详解及实战

1 U-Net网络介绍 1.1 U-Net由来 2015年U-Net的出现使得原先需要数千个带注释的数据才能进行训练的深度学习神经网络大大减少了训练所需要的数据量&#xff0c;并且其针对神经网络在图像分割上的应用开创了先河。当时神经网络在图像分类任务上已经有了较好的成果&#xff0c;但…

出现了一个全新的编程语言——Mojo

最近&#xff0c;编程领域又一个黑马忽然冲进了开发者们的视野并正式开放下载。 Mojo 的简介 Mojo是一种新推出的编程语言&#xff0c;它将Python的简单性与Rust的速度和内存安全性结合在一起。 它处于开发的早期阶段&#xff0c;为用户提供了一个在线游乐场来探索其功能。 …

【JAVA学习笔记】 30 - Object类详解(equal,hashCode,toString)

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter08/src/com/yinhai/object_ 一、equal方法 和equal的对比 1.既可以判断基本类型&#xff0c;又可以判断引用类型&#xff0c;返回boolean值 2. 如果判断基本类型&#xff0c;判断的值是否相…

Vue 项目进行 SEO 优化

SSR 服务器渲染 服务端渲染, 在服务端 html 页面节点, 已经解析创建完了, 浏览器直接拿到的是解析完成的页面解构 关于服务器渲染&#xff1a;Vue 官网介绍 &#xff0c;对 Vue 版本有要求&#xff0c;对服务器也有一定要求&#xff0c;需要支持 nodejs 环境。 优势: 更好的 …

Mysql视图特性用户管理

目录 一、视图基本使用 二、用户管理 2.1 用户 ①用户信息 ②创建用户 tips:(解决无法创建用户) ③删除用户 ④修改用户密码 2.2数据库的权限 ①给用户授权 ②回收权限 视图&#xff1a;视图是一种虚拟表。视图是基于一个或多个基础表中的数据所创建的一个查询结果…

ATA-8061射频功率放大器应用领域介绍

ATA-8061射频功率放大器简介 ATA-8061是一款射频功率放大器。其P1dB输出功率500W&#xff0c;饱和输出功率1000W。增益数控可调&#xff0c;一键保存设置&#xff0c;提供了方便简洁的操作选择&#xff0c;可与主流的信号发生器配套使用&#xff0c;实现射频信号的完美放大。宽…

[common c/c++] 使用 posix 共享内存 和 mmap 实现 inter process function call

正文&#xff1a; mmap 可以映射某个文件的某块内存区域&#xff0c;因此可以通过 mmap 和 共享内存的方式将两个不同进程内的函数的所有二进制码映射到共享内存里&#xff0c;以实现跨进程的函数调用。 实际上&#xff0c;linux 动态库的动态链接正是通过mmap 把动态库文件 …

基于ARM+FPGA+AD的多通道精密数据采集仪方案

XM 系列具备了数据采集仪应具备的“操作简单、便于携带、满足各种测量需求”等功能的产品。具有超小、超轻量的手掌大小尺寸&#xff0c;支持8 种测量模块&#xff0c;还可进行最多576 Ch的多通道测量。另外&#xff0c;支持省配线系统&#xff0c;可大幅削减配线工时。使用时不…

MySQL的基础(一)

文章目录 SQLSQL的语法特点主要包括以下几点&#xff1a;一、 SQL - DDL -- 数据定义语言1.1 数据库操作1.1 显示现有的数据库1.2 创建数据库1.3 删除数据库1.4 使用 1.2 数据表操作1.2.1 表查询1.2.2 表创建1.2.3 修改表 1.2.4 小结 二、SQL - DML -- 数据操作语言2.1 添加数据…

Kotlin基础——函数、变量、字符串模板、类

函数、变量、字符串模板、类 函数变量字符串模板类 函数 函数组成为 fun 函数名(参数名: 参数类型, …): 返回值{} fun max(a: Int, b: Int): Int {return if (a > b) a else b }上面称为代码块函数体&#xff0c;当函数体由单个表达式构成时&#xff0c;可简化为表达式函…