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

news/2025/2/23 2:51:39/
<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.ppmy.cn/news/1127984.html

相关文章

vue3硅谷甄选02 | 封装svg组件 - axios二次封装

文章目录 vue3硅谷甄选02功能1&#xff1a;封装svg组件SVG图标配置svg封装成组件svg组件注册为全局组件自定义统一注册全局组件的插件自定义插件的原理插件的使用 app.use(plugin, [options]) 功能2&#xff1a;axios二次封装使用mock插件构造数据axios二次封装api接口统一管理…

vue之vuex

Vuex 是 Vue.js 的一个状态管理模式和库&#xff0c;为应用中的所有组件提供了一个集中式的存储管理&#xff0c;并提供了一种强大的方式来管理应用的状态。Vuex 包含以下核心概念&#xff1a; State&#xff1a;定义了应用的状态&#xff0c;类似于组件中的 data。 Getters&a…

已实现:关于富文本组件库vue2-editor的使用方法以及一些必要的注意事项,特别是设置完富文本以后的回显问题。以及在光标位置插入字符串等

前言 目前常见的基于vue的富文本编辑器有两个&#xff1a;“vue2-editor” 和 “vue-quill-editor” 都是用于Vue.js的富文本编辑器组件&#xff0c;它们具有一些共同的特点&#xff0c;但也有一些区别。 共同点&#xff1a; 1、富文本编辑功能&#xff1a; 两者都提供了富文…

PHP实现DFA算法,查找关键词

# 添加关键词 到全局字典dict里面 protected function addWord($strWord) {$len mb_strlen($strWord,UTF-8);$curNode &$this->dict;for ($index 0; $index < $len; $index) {$word mb_substr($strWord, $index, 1, UTF-8);if (!isset($curNode[$word])) {$curNo…

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

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

面试题库(十):NIO和Netty面试题

NIO 阐述 NIO原理&#xff1f;BIO/NIO/AIO有什么区别&#xff1f;有那些实现&#xff1f;讲讲NIO的原理与实现&#xff1f;NIO用到了哪个经典技术思想&#xff1f;JDK1.8中NIO有做什么优化了解多路复用机制 常见问题 同步阻塞、同步非阻塞、异步的区别&#xff1f;select、pol…

高云FPGA系列教程(9):cmd-parser串口命令解析器移植

文章目录 @[toc]cmd-parser库简介cmd-parser库源码获取GW1NSR-4C移植cmd-parser实际测试cmd-parse命令解析器优化本文是高云FPGA系列教程的第9篇文章。 上一篇文章介绍片上ARM Cortex-M3硬核处理器串口外设的使用,演示轮询方式和中断方式接收串口数据,并进行回环测试。 本文…

Kakfa高效读写数据

1.概述 无论 kafka 作为 MQ 也好&#xff0c;作为存储层也罢&#xff0c;无非就是两个功能&#xff1a;一是 Producer 生产的数据存到 broker&#xff0c;二是 Consumer 从 broker 读取数据。那 Kafka 的快也就体现在读写两个方面了&#xff0c;本文也是从这两个方面去剖析Kafk…