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.rhkb.cn/news/143380.html

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

相关文章

高频工业RFID读写器的主要应用

随着通信技术的迅速发展&#xff0c;RFID的应用也逐渐广泛&#xff0c;产线、零售、身份识别、金融领域、门禁安全等各个方面都有RFID的身影。其中很多应用都是以高频技术应用为主&#xff0c;下面我们就跟大家一起来了解一下&#xff0c;高频工业RFID读写器的主要应用包括哪些…

BGP服务器租用价格表_腾讯云PK阿里云

BGP云服务器像阿里云和腾讯云均是BGP多线网络&#xff0c;速度更快延迟更低&#xff0c;阿里云BGP服务器2核2G3M带宽优惠价格108元一年起&#xff0c;腾讯云BGP服务器2核2G3M带宽95元一年起&#xff0c;阿腾云分享更多云服务器配置如2核4G、4核8G、8核16G等配置价格表如下&…

对象数组合并和去重

数组去重: 普通字符串/数字数组去重: 1. 利用Set的特性 > new Set(arr) 2. for遍历, indexOf判断是否存在 3. 利用对象去重, 因为对象的key有唯一性 数组合并: 可以使用克隆(克隆, 深克隆的那些方法) 对象数组去重: for循环, find或者findIndex判断是否存在, 然后不存…

某瑞集团安全技术研发岗位面试

本文由掌控安全学院 - sbhglqy 投稿 一、自我介绍 阿吧阿吧&#xff0c;不多说 二、就ctf比赛经历方面提些问题 面试官&#xff1a;ctf打了多久了 我&#xff1a;两三年了。 面试官&#xff1a;得过什么奖项没有 我&#xff1a;本科的时候得过一个校一等奖。 面试官&#x…

路径依赖

今天聊会路径依赖&#xff0c;前两天看到一个老同事还在从事他十多年做的事&#xff08;软件行业里一个比较细分的领域&#xff09;&#xff0c;当初可完全是一个偶然的因素入了这行&#xff0c;不成想这一做就是十几年。他说“我只能干这个&#xff0c;其他也不会啊&#xff0…

服务网关Gateway_三大核心概念

路由(Route) 这是网关的基本构建块。它由一个ID&#xff0c;一个目标URI&#xff0c;一组断言和一组过滤器定义。如果断言为真&#xff0c;则路由匹配。 断言(predicate) 输入类型是一个ServerWebExchange。我们可以使用它来匹配来自HTTP请求的任何内容&#xff0c;例如head…

【小程序 - 基础】WXML、WXSS语法以及小程序的配置、网络数据请求_03

目录 一、WXML模板语法 1. 数据绑定 1.1 数据绑定的基本原则 1.2 在 data 中定义页面的数据 1.3 Mustache 语法的格式 1.4 Mustache 语法的应用场景 2. 事件绑定 2.1 什么是事件 2.2 小程序中常用的事件 2.3 事件对象的属性列表 2.4 target 和 currentTarget 的区别…

Excel·VBA日期时间转换提取正则表达式函数

标准日期转换 Function 标准日期(ByVal str$) As DateDim pat$, result$arr Array("(\d{4}).*?(\d{1,2}).*?(\d{1,2})", "(\d{4}).*?(\d{1}).*?(\d{1,2})")If Len(str) < 8 Then pat arr(1) Else pat arr(0)With CreateObject("vbscript.r…

【计算机网络】——应用层

// 图片取自王道 仅做交流学习 一、基本概念 应用层概述 协议是 网络层次模型 中多台主机之间 同层之间进行通信的规则。是一个水平概念 垂直空间上&#xff0c;向下屏蔽下层细节&#xff0c;向上提供服务接入&#xff0c;多台主机之间同层之间形成一条逻辑信道。 应用层的…

最新AI写作系统ChatGPT源码/支持GPT4.0+GPT联网提问/支持ai绘画Midjourney+Prompt应用+MJ以图生图+思维导图生成

一、智能创作系统 SparkAi创作系统是基于国外很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧&…

css实现四角圆边框

摘要&#xff1a; 做大屏的项目时&#xff0c;遇到很多地方要用到不同尺寸的盒子需要圆角的效果&#xff0c;所以不可能要求ui弄那么多图片的&#xff0c;并且那么多图片加载速度很慢的&#xff0c;比较臃肿&#xff0c;大屏要求的就是流畅&#xff0c;所以这用css加载很快的&a…

计算机网络第五节 网络层

一&#xff0c;网络引入的目的 1.网络层以下层次解决的问题&#xff0c;未解决的问题 从7层结构上看&#xff0c;网络层下是数据链路层 从4层结构上看&#xff0c;网络层下面是网络接口层 至少我们看到的网络层下面是以太网 以太网解决了什么问题&#xff1f; 答&#xff1…

【LeetCode热题100】--141.环形链表

141.环形链表 使用快慢指针&#xff1a; 定义两个指针&#xff0c;一快一慢&#xff0c;慢指针每次只移动一步&#xff0c;而快指针每次移动两步。初始时&#xff0c;慢指针在位置head&#xff0c;而快指针在位置head.next&#xff0c;这样&#xff0c;如果在移动的过程中&…

css实现Chrome标签栏

如图这是一个特殊的带有圆角的导航栏&#xff0c;实现这种效果并不难 这是我实现的效果&#xff1a; 淡一点的就是鼠标悬停的样式 以下是代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><m…

Hugging News #0925: 一览近期的新功能发布

每一周&#xff0c;我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新&#xff0c;包括我们的产品和平台更新、社区活动、学习资源和内容更新、开源库和模型更新等&#xff0c;我们将其称之为「Hugging News」。本期 Hugging News 有哪些有趣的消息&#xff0…

编译opencv-3.4.5 [交叉编译]

在unbuntu20.04环境下编译opencv3.4.5&#xff0c; cmake 版本&#xff1a;3.27.4 gcc 版本&#xff1a;11.4.0 g版本&#xff1a;11.4.0 在此环境下编译opencv4.5.4正常。 1. 编译时遇到的问题 &#xff08;1&#xff09; Built target libprotobuf make: *** [Makefile:163…

这是一堂价值3000元的自驾旅行攻略

点击文末“阅读原文”即可参与节目互动 后期、音频 / 卷圈 运营 / 卷圈&#xff0c;Sand 监制 / 姝琦 封面 / 姝琦midjourney 产品统筹 / bobo特别感谢 / 嘉实多 在过去几年的疲惫和沉甸甸的经历之后&#xff0c;我们心中都怀揣着对自由旅行的渴望&#xff0c;期待着无拘无束…

为什么埃隆·马斯克说Rust是AGI的语言?

为什么埃隆马斯克说Rust是AGI的语言&#xff1f; 大喵点评&#xff1a;本文作者的观点不代表我的观点&#xff0c;另有人视频里指出Mojo比Python快 35000倍的测评有失偏颇。请见&#x1f447;视频。 但&#xff0c;本篇的价值在于 以及为什么WasmEdge是AGI采用Rust的关键路径…

云计算与大数据——Spark的安装和配置

云计算与大数据——Spark的安装和配置 Spark的简单介绍&#xff1a; Apache Spark是一个基于内存的分布式计算框架&#xff0c;它提供了高效、强大的数据处理和分析能力。与传统的Hadoop MapReduce相比&#xff0c;Spark的主要优势在于其能够将数据集缓存在内存中&#xff0c…

openssl创建CA证书教程

配置生成CA证书 总示意图&#xff1a; (1)&#xff0c;通过openssl创建CA证书 第一步&#xff1a;创建一个秘钥&#xff0c;这个便是CA证书的根本&#xff0c;之后所有的东西都来自这个秘钥 # 通过rsa算法生成2048位长度的秘钥 openssl genrsa -out myCA.key 2048 第二步&#…