Tree树形控件做权限时,保持选项联动的同时,解决数据无法回显的问题

news2024/9/24 7:18:03

项目需求:

在这里插入图片描述

要求树形控件要有父子联动,也就是选择父级选项,子级也要选中,那么check-strictly属性就不能设置死,我的是 :check-strictly='checkStrictly',在data中赋值有变量。我之前设置check-strictly,就没了联动效果,所以这边做了一下处理。

          <Tree
            :data="treeData"
            ref="tree"
            :check-strictly='checkStrictly'
            show-checkbox
            empty-text
            @on-check-change='treeChange'
          >
          </Tree>

解决思路:

主要是check-strictly要设置动态的,在tree数据设置之前先为true,代表父子不关联,等赋值完数据并且渲染后,再把check-strictly设置false,代表父子联动。这样点击选中控件选项后,数据就是联动的,最后再用getCheckedAndIndeterminateNodes()得到全选和半选的数组。

   //点击tree触发
    treeChange () {
      this.isSave= false
      let roleData = this.$refs.tree.getCheckedAndIndeterminateNodes()
      let roleIds = []
      roleData.forEach(res=>{
        roleIds.push(res.id)
      })
      this.treeDataIds = roleIds
      console.log(this.treeDataIds)
    },
    // 表格行点击事件
    handleRowClick (row) {
      this.spinShow = true //局部加载
      this.checkStrictly=true  //开始赋值之前先为true
      this.roleId = row.id
      console.log('点击表格行:', row.id)
      axios
        .request({
          url: '/system-role/get-permissions-menu/' + row.id,
          method: 'get'
        })
        .then((res) => {
          const data = res.data.data // 获取原始数据
          this.spinShow = false
          this.treeData = data
          setTimeout(res=>{
            this.checkStrictly=false  //赋值之后为false,这样设置后还是有联动的,完美解决
          },1000)
          console.log(this.treeData,'this.treeData')
        })
    }

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

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

相关文章

HR必读的四本书籍推荐

作为一名人力资源管理者&#xff0c;除了在实际工作中积累经验&#xff0c;还需要不断地学习和进修&#xff0c;以应对日益变化的企业管理挑战。但是&#xff0c;在人力资源管理这个领域&#xff0c;有太多的书籍、课程和文章可供选择&#xff0c;这让人不免有些困惑。因此&…

《横向领导力》

在介绍《横向领导力》之前&#xff0c;有必要先推荐另一本同类书籍——《经理人参阅&#xff1a;领导力提升》。这本书来自经理人参阅ManagerReads&#xff0c;涵盖了领导力的许多概念和技能&#xff0c;对于想要全面提升领导力的人员来说是非常有价值的。不过&#xff0c;对于…

9.pixi.js编写的塔防游戏(类似保卫萝卜)-群炮弹发射逻辑

游戏说明 一个用pixi.js编写的h5塔防游戏&#xff0c;可以用electron打包为exe&#xff0c;支持移动端&#xff0c;也可以用webview控件打包为app在移动端使用 环境说明 cnpm6.2.0 npm6.14.13 node12.22.7 npminstall3.28.0 yarn1.22.10 npm config list electron_mirr…

MATLAB 投资问题

✅作者简介&#xff1a;人工智能专业本科在读&#xff0c;喜欢计算机与编程&#xff0c;写博客记录自己的学习历程。 &#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&…

【子序列+状压DP】ABC308 E MEX

这应该算是很套路的题&#xff0c;照理说是要做出来的 E - MEX (atcoder.jp) 题意&#xff1a; 思路&#xff1a; 首先&#xff0c;三元组很容易让我们联想到枚举中间那个元素&#xff0c;但是在这道题中不是这么搞的 可以注意到&#xff0c;题目是要我们统计所有子序列&qu…

WinSCP脚本实现将jar包一键上传Ubuntu并docker部署

准备 首先&#xff0c;在Ubuntu写一个.sh脚本用于自动更新jar包的docker容器和镜像&#xff0c;然后在Windows写一个.bat脚本用于上传jar包并运行.sh脚本。 deploy.sh # Kill容器 docker kill demo# 删除容器 docker rm demo# 删除镜像 docker rmi my/demo# 构建镜像 docker b…

Spring事务@Transactional常见的8种失效场景(通俗易懂)

前言&#xff1a;在日常的开发过程中&#xff0c;多多少少会遇到Spring事务失效导致的一些事故&#xff0c;本篇主要通过具体的案例分析来讲解常见的8种失效的场景&#xff0c;让阅读者通俗易懂的明白每一种事务失效的原因&#xff0c;知其然并知其所以然&#xff01; 目录 一…

Java——《面试题——Git篇》

全文章节 Java——《面试题——基础篇》 Java——《面试题——JVM篇》 Java——《面试题——多线程&并发篇》 Java——《面试题——Spring篇》 Java——《面试题——SpringBoot篇》 Java——《面试题——MySQL篇》​​​​​​ Java——《面试题——SpringCloud》 Java——…

初识操作系统以及Linux常用指令(上)

目录 一&#xff1a;操作系统简介 二&#xff1a;Linux简介 Linux是什么 Linux的作用 非图形化的Linux界面 Linux环境的搭建 三&#xff1a;Linux下的文件结构 ⭐Linux组织文件的结构为多叉树 文件路径 Linux下的隐藏文件 四&#xff1a;Linux基础指令 创建用户相…

实践:devops之云主机模式持续部署(ci-cd)

实践&#xff1a;devops之云主机模式持续部署(ci-cd) 目录 推荐文章 https://www.yuque.com/xyy-onlyone/aevhhf?# 《玩转Typora》 0、流程分析 2条Jenkins pipeline CI pipeline CD pipeline 标准规范 项目规范与总体设计 公司里面要使用流水线要做持续集成CI/CD的项目越来…

02-基础入门-数据包拓展

基础入门-数据包拓展 基础入门-数据包拓展1、http/https数据包&#xff08;1&#xff09;HTTP协议是什么&#xff1f;&#xff08;2&#xff09;HTTP原理&#xff08;3&#xff09;HTTP特点&#xff08;4&#xff09;URI和URL的区别&#xff08;5&#xff09;HTTP报文组成&…

IP路由协议(RIP、IGRP、OSPF、IS-IS、BGP)

文章目录 1、路由分类2、RIP协议1&#xff09;RIP的工作原理2&#xff09;RIP路由表的更新过程3&#xff09;RIP路由表的更新原则4&#xff09;RIP的特性5&#xff09;RIP协议的版本 4、IGRP协议1&#xff09;IGRP路由表的更新2&#xff09;IGRP的度量标准 5、OSPF协议1&#x…

Java【动态规划】斐波那契数列模型, 图文详解 + 代码

文章目录 一、第 N 个泰波那契数1, 题目2, 思路分析2.1, 状态表示2.2, 状态转移方程2.3, 初始化2.4, 填表顺序2.5, 返回值 3, 代码 二、三步问题1, 题目2, 思路分析2.1, 状态表示2.2, 状态转移方程2.3, 初始化2.4, 填表顺序2.5, 返回值 3, 代码 三、1, 题目2, 思路分析2.1, 状态…

Redis 高可用和优化

目录 一&#xff1a;Redis 高可用 二&#xff1a; Redis 持久化 1、持久化的功能 2、Redis 提供两种方式进行持久化 3、 RDB 持久化 &#xff08;1&#xff09;触发条件 &#xff08;1.1&#xff09;手动触发 &#xff08;1.2&#xff09;自动触发 &#xff08;1.3&am…

软件测试岗位之大厂到底有多累?

今天给大家分享两个朋友的故事&#xff0c;他们分别在国内两家顶尖的互联网大厂&#xff0c;一个在头条&#xff0c;一个在蚂蚁。 头条的故事 头条的主人公&#xff0c;在入职后的一年里&#xff0c;晚上十点半下班是比较早了&#xff0c;基本上都是十一点半左右下班&#xff…

Redmi4X刷入Ubuntu touch真正成为一台远程无需人操作的云服务器(就是配置垃圾)

前言 前几天把高一买的手机相册和文件拷贝到了电脑上&#xff0c;寻思这旧手机还能干嘛&#xff0c;搜了一下有做监控的&#xff0c;行车记录仪的&#xff0c;最后决定还是做Linux服务器香啊。用了一天时间参考网上的教程做完了&#xff0c;自己再做一下总结和一些弯路记录。 …

ctemplate

参考安装 原理&#xff1a; 如何使用&#xff1f; // test_ctemplate.cc #include <iostream> #include <string> #include <ctemplate/template.h>int main() {std::string in_html "./test.html";std::string value "一行白鹭上青天&q…

一、设计模式的作用和六大原则

文章目录 引言1.设计模式1.1 设计模式的目的1.2 设计模式六大原则1.2.1 单一职责原则&#xff08;类、方法和接口&#xff0c;保持职责单一性&#xff0c;如:Activity和Adapter分成两个类&#xff09;1.2.2. 开闭原则&#xff08;扩展开放&#xff0c;修改关闭&#xff1b;如&a…

python 数字进制

python 数字进制 1、数学中进制对应代码2、Python进制转换函数 1、数学中进制对应代码 十六进制&#xff1a; 0x11 八进制&#xff1a; 0o11 二进制&#xff1a; 0b11 十进制&#xff1a; 11&#xff08;啥都不加默认为十进制&#xff09; #!/usr/bin/python # -*- coding: UTF…

第133页的gtk+编程例子——编写计算器应用

第133页的gtk编程例子——编写计算器应用 以下gtk编程例子是来自书籍《实用技术&#xff1a;开发Linux应用——用GTK和GDK开发Linux图形用户界面应用》第133页的内容——编写计算器应用 例子程序是在gtk2.0编译的&#xff0c;已经修改许多地方才能在gtk3.0编译通过&#xff0c…