el-collapse 嵌套中 el-checkbox作为标题,选中复选框与el-tree联动

<el-drawertitle="应用授权":visible.sync="menuDrawer"><el-collapse accordion style="padding: 15px"><el-collapse-item v-for="item in platList"><template slot="title"><el-checkbox v-model="item.isCheck" :label="item.platformName" @click.stop.native="()=>{}"@change="checkedAll(item.platformId, item.isCheck, item.treeIdList)"></el-checkbox></template><el-inputv-model="filterText"@input="(val) => handleInputFilter(val, item.platformId)"size="mini"placeholder="请输入内容"style="width: 100%"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input><el-tree:ref="`tree${item.platformId}`"style="padding-top: 7px":data="item.treeData":filter-node-method="filterNode"show-checkboxhighlight-currentcheck-strictlynode-key="menuId"empty-text="暂无数据" :props="{id: 'menuId',label: 'menuName'}"></el-tree></el-collapse-item></el-collapse></el-drawer>
getPlatformList(tenantId) {const loading = this.$loading({lock: true,text: '拼命加载中...',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});allPlatform(tenantId).then(async response => {this.platList = response.data;for (let item of this.platList) {await getMenuListByPlatform(item.platformId).then(res => {item.treeData = this.handleTree(res.data.menus, 'menuId')item.treeIdList = res.data.menuIds})}getMenusByTenant(tenantId).then(res=>{if (res.code === 200) {this.platList.forEach(item => {this.$refs[`tree${item.platformId}`][0].setCheckedKeys(res.data);})}})loading.close()this.menuDrawer = true});},

效果图:
在这里插入图片描述

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

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

相关文章

力扣刷题-链表-环形链表

具体题目与思路见&#xff1a;https://programmercarl.com/0142.%E7%8E%AF%E5%BD%A2%E9%93%BE%E8%A1%A8II.html#%E6%80%9D%E8%B7%AF 该文章详细介绍了如何寻找环入口点&#xff0c;以及数学原理。 class ListNode(object):def __init__(self, x):self.val xself.next Nonecl…

brew 常用命令

安装&#xff1a; /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"卸载&#xff1a; sudo /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)&qu…

windows11系统没有系统散热方式的解决办法

一、问题描述 当我们查看Win11系统的&#xff08;同时按下键盘的WinR键即可打开运行窗口&#xff09;【控制面板】-->【硬件和声音】-->【电源选项】-->【更改计划设置】-->【 更改高级电源设置】-->【处理器电源管理】下没有系统散热方式的选项&#xff0c;如下…

IDEA运行第一个Java简单程序(新建项目到运行类)

目录 前言 一、准备工作 JDK下载安装 1.IDEA下载安装 二、IDEA建立项目 &#xff08;一&#xff09;新建项目&#xff08;银河系&#xff09; &#xff08;二&#xff09;新建模块&#xff08;地球&#xff09; &#xff08;三&#xff09;新建包&#xff08;国家&#…

PWM杂项

PWM 是脉冲宽度调制 (Pulse Width Modulation) 的缩写&#xff0c;是一种常用的在数字系统中控制模拟电路或者电源的技术。其基本原理是通过控制一系列方波的高电平时间宽度&#xff0c;以实现对模拟信号等的精细控制。下面简单介绍下 PWM 的基本工作流程&#xff1a; PWM 信号…

Java_GUI编程-----1、 GUI编程简介

Java_GUI编程 1、 GUI编程简介 该怎么学&#xff1f; 这是什么&#xff1f; 它怎么玩&#xff1f; 平时应该如何运用&#xff1f; 组件 窗口 弹窗 面板 文本框 列表框 按钮 图片 监听事件 鼠标事件 键盘事件 工具 一、简介 GUI的核心技术&#xff1a;Swing、…

学之思项目第一天-完成项目搭建

一、前端 拉下前端代码执行 npm i 然后执行npm run serve就行了 二、后端 搭建父子模块 因为这个涉及到前台以及后台管理所以使用父子模块 并且放置一个公共模块&#xff0c;放置公共的依赖以及公共的代码 2.1 搭建父子工程 这个可以使用直接一个个的maven模块&#xff…

Vue 动态设置css伪元素content的值,解决不渲染和渲染为数字的问题

目前的代码如下 <div class"overall-results-evaluate" :style"styleObject"><!-- 其他代码&#xff08;亦或者是使用styleObject的标签&#xff0c;父级有styleObject的style属性后&#xff0c;子级写样式时都可以使用&#xff09; --> <…

直方图投影法判断裂缝走势(裂缝类型)

裂缝类型 裂缝类型有很多种&#xff0c;这里我们仅仅判断线性裂缝与网状裂缝&#xff0c;线性裂缝按照其走势有可分为横向裂缝、纵向裂缝和斜向裂缝。 我觉得大家应当有这样的意识&#xff0c;面对网状裂缝&#xff0c;它的二维参数是否有意义&#xff1f;答案是没有&#xf…

解决 MyBatis-Plus 中增加修改时,对应时间的更新问题

问题&#xff1a;在添加修改时&#xff0c;对应的 create_time 与 insert_time 不会随着添加修改而自动的更新时间 第一步&#xff1a;首先在对应的属性上&#xff0c;加上以下注解 如果只添加以下注解&#xff0c;在增加或者修改时&#xff0c;可能对应的 LocalDateTime 会出…

Vue小笔记

官网中文手册 常用命令 vue标签大杂烩 v-if&#xff1a;条件渲染v-else: 如果为 false, 当前标签才会输出到页面v-show : 通过控制 display 样式来控制显示/隐藏v-for&#xff1a; 列表渲染v-on&#xff1a; 事件监听。 v-on&#xff1a; 。事件修饰符&#xff1a;鼠标事件&…

oracle常用sql

oracle常用sql oracle常用sql查询当前会话id(sid),会话序列号(serial#),操作系统进程id(spid)查询数据库信息查询实例信息查询字符集查看回收站情况数据库系统PSU信息数据库大小查看表空间状况常规库表空间情况查询,非CDBCBD表空间情况查询当前客户端信息资源使用情况…

Android面试题汇总(四)

Android 性能调优相关 1、谈谈你对Android性能优化方面的了解&#xff1f; 启动优化&#xff1a;app启动的时候不做耗时操作&#xff0c;尽量把没有必要的初始化代码异步操作 布局优化&#xff1a;减少代码层数&#xff0c;使用约束布局或者时layout优化的标签&#xff08;inc…

GB/T 14710-2009 医用电器环境要求及试验方法

举个例子&#xff1a; 应符合GB/T 14710-2009中气候环境试验II组&#xff0c;机械环境试验II组的要求。 气候环境试验II组&#xff0c;机械环境试验II组&#xff1f; 这是2个属性&#xff0c;先按特定的条件分组&#xff0c;分组后&#xff0c;应该满足该组的特定要求。这个标…

Linux面试题汇总1

MySQL数据库 1、MySQL和Oracle的区别 1.Oracle是大型数据库&#xff0c;而MySQL是中小型数据库。但是MySQL是开源的&#xff0c;但是Oracle是收费的&#xff0c;而且比较贵。 2. Oracle的内存占有量非常大&#xff0c;而mysql非常小 3. MySQL支持主键自增长&#xff0c;指定主…

Ubuntu设置开机执行sh脚本

Ubuntu设置开机执行sh脚本 /etc/systemd/system 目录下新增后缀 service文件&#xff0c;eg: start.service ,文件内容如下 [Unit]Description描述信息 Afternetwork.target[Service]# 需要执行的sh文件路径,需要绝对路径 ExecStart/usr/xxx/start.shKillModenone Restarton-…

makefile之自动化变量

makefile之自动化变量 常见自动化变量应用举例 常见自动化变量 $&#xff1a;目标文件。在模式规则中&#xff0c;$代表符合模式的目标文件集合中的一个目标文件。 $<&#xff1a;第一个依赖文件。在模式规则中&#xff0c;$<代表符合模式的依赖文件集合中的第一个依赖…

Java初级到中级:技术提升的策略与方法

文章目录 1 问题背景2 前言3 方法 1 问题背景 截至2023年7月&#xff0c;笔者已经毕业2年了&#xff0c;每天都在搬砖打螺丝&#xff0c;自我感觉需要沉淀、思考、总结一下。思考和总结一下如何从Java初级提升到Java中级&#xff0c;需要掌握一些什么方法论&#xff0c;有效地去…

gulp 错误集锦

为了打包构建之前的layui写的项目&#xff0c;用到了gulp&#xff0c;但是遇到的坑还挺多&#xff0c;记录一下。 1、运行gulp时报错 ReferenceError: primordials is not defined 解决办法&#xff1a; ReferenceError: primordials is not defined 意思是primordials这个没…

html文件中引入.ts文件并运行

问题&#xff1a; 一个项目&#xff0c;是用TypeScript编写的&#xff0c;但是html中引入了.ts文件后报错了&#xff0c;有没有办法跳过tsc这个编译命令&#xff0c;不然每次都需要Tsc编译一下后再启动&#xff0c;有点麻烦 <!doctype html> <html lang"zh-CN&q…