当前位置: 首页 > news >正文

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.lryc.cn/news/182584.html

相关文章:

  • Ubuntu中还换源 sudo apt-get update更新失败
  • flutter播放rtmp视频
  • stm32 - 中断
  • 【洛谷 P1216】[USACO1.5] [IOI1994]数字三角形 Number Triangles 题解(动态规划)
  • 十四天学会C++之第四天(面向对象编程基础)
  • 复习Day09:哈希表part02:141.环形链表、142. 环形链表II、454.四数相加II、383赎金信
  • Internet通过TCP/IP协议可以实现多个网络的无缝连接
  • 互联网Java工程师面试题·Dubbo 篇·第二弹
  • (c语言)经典bug
  • 用于工业物联网和自动化的 Apache Kafka、KSQL 和 Apache PLC4
  • 1.1.1开发基础-硬件-万用表
  • Mysql内置函数、复合查询和内外连笔记
  • 【VUE·疑难问题】定义 table 中每行的高度(使用 element-UI)
  • 【重拾C语言】四、循环程序设计(后判断条件循环、先判断条件循环、多重循环;典例:计算平均成绩、打印素数、百钱百鸡问题)
  • Linux 安装 Gitlab
  • stm32-SPI协议
  • 想要精通算法和SQL的成长之路 - 并查集的运用和案例(省份数量)
  • 解决内网拉取企微会话存档代理问题的一种办法
  • 二十二,加上各种贴图
  • 新版校园跑腿独立版小程序源码 多校版本,多模块,适合跑腿,外卖,表白,二手,快递等校园服务
  • SpringBoot banner 样式 自动生成
  • 回收站里面删除的照片如何恢复?
  • Qt model/view 理解 2
  • 【LeetCode热题100】--114.二叉树展开为链表
  • Java | Maven(知识点查询)
  • Vmware 静态网络配置
  • 【数据结构--八大排序】之希尔排序
  • Linux中生成so库的文件引用另一个so库问题的解决
  • EDI是连接原始电子商务和现代电子商务的纽带
  • 星宿UI2.4资源付费变现小程序源码 支持流量主