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

相关文章

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

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

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

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

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

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

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

裂缝类型 裂缝类型有很多种&#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;鼠标事件&…

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;指定主…

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

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

宝塔Node部署nuxt3

宝塔Node部署nuxt3 1、首先本地执行打包 yarn build2、然后把目录中的这个文件压缩成zip 3、在宝塔文件处添加一个网站的文件目录&#xff0c;并把文件解压到里面 4、点击左侧的网站&#xff0c;然后选择node项目&#xff0c;选择node版本安装 5、安装完后&#xff0c;点击新…

Minecraft 1.20.x Forge模组开发 06.建筑生成

我们本次尝试在主世界生成一个自定义的建筑。 效果展示 效果展示 效果展示 由于版本更新缘故,1.20的建筑生成将不涉及任何Java包的代码编写,只需要在数据包中对建筑生成进行自定义。 1.首先我们要使用游戏中的结构方块制作一个建筑,结构方块使用教程参考1.16.5自定义建筑生…

el-menu 导航栏学习(1)

最简单的导航栏学习跳转实例效果&#xff1a; &#xff08;1&#xff09;index.js路由配置&#xff1a; import Vue from vue import Router from vue-router import NavMenuDemo from /components/NavMenuDemo import test1 from /components/test1 import test2 from /c…

nodejs+vue 经典建筑网站elementui

第1章 项目概述 1 1.1 问题描述 1 1.2 项目目标 1 1.3 项目适用范围 2 1.4 项目应遵守的规范与标准 2 1.5 涉众 2 具有功能强大、支持跨平台、运行速度快、安全性高、成本低等优点。而对于后者我们使用 来完成它&#xff0c;使其网页功能完备&#xff0c;界面友好、易开发、易…

华为云云耀云服务器L实例评测|使用华为云耀云服务器L实例的CentOS部署Docker并运行Tomcat应用

目录 前言 步骤1&#xff1a;登录到华为云耀云服务器L实例 步骤2&#xff1a;安装Docker 并验证Docker安装 步骤3&#xff1a;拉取Tomcat镜像并运行Tomcat容器 步骤4&#xff1a;放行8080端口 步骤5&#xff1a;访问tomcat 步骤6&#xff1a;管理Tomcat容器 小结 前言 …

【c语言的malloc函数介绍】

malloc&#xff08;memory allocation的缩写&#xff09;是C语言中的一个函数&#xff0c;用于动态分配内存空间。这个函数允许你在程序运行时请求指定大小的内存块&#xff0c;以供后续使用。malloc函数属于标准库函数&#xff0c;需要包含头文件#include <stdlib.h> 才…

NLP 项目:维基百科文章爬虫和分类 - 语料库阅读器

塞巴斯蒂安 一、说明 自然语言处理是机器学习和人工智能的一个迷人领域。这篇博客文章启动了一个具体的 NLP 项目&#xff0c;涉及使用维基百科文章进行聚类、分类和知识提取。灵感和一般方法源自《Applied Text Analysis with Python》一书。 在接下来的文章中&#xff0c;我将…

本地项目远程Linux运行

文章目录 1 本地安装anconda&#xff08;如果不需要在本地运行&#xff0c;这步可以忽略&#xff09;2 进入本地conda环境&#xff08;如果不需要在本地运行&#xff0c;这步可以忽略&#xff09;2.1 查看已存在的环境2.2 创建新的conda环境2.3 激活新建的环境2.4 安装tensorfl…

大学生登记国家证书软件著作权提升就业资质

大学生登记国家证书软件著作权提升就业资质 随着信息技术的快速发展&#xff0c;软件行业成为了许多大学生就业的热门选择之一。然而&#xff0c;在竞争激烈的就业市场中&#xff0c;除了掌握专业知识和技能外&#xff0c;如何提升自己的就业资质也显得尤为重要。其中&#xff…

Vivado与Notepad++关联步骤

填写内容 先看"关联步骤"再看此处&#xff1a; 在“editor”栏中填写 Notepad的路径&#xff0c;并加上[file name] -n[line number]&#xff0c; 这里我的 Notepad 的路径为 C:/Program Files (x86)/Notepad/notepad.exe &#xff1b; 故这里我就填上以下内容即可…

[C#]vs2022安装后C#创建winform没有.net framework4.8

问题&#xff0c;我已经在visualstudio安装程序中安装了.net框架4.8的SDK和运行时。 然而&#xff0c;我在visual studio 2022中找不到已安装的框架。 我已经检查了我的VS 2019&#xff0c;它可以很好地定位网络框架4.8&#xff0c;它可以构建我的项目。但VS 2022不能。 我已经…