vue的elementUI的el-tree的选择

有一棵树型的数据,需要实现:在外部加一个 全选和不全选的按钮,去全部勾选树结构里面每一项的选框。

当点击勾选全选的时候,树的每一项都勾选;

当取消全选的时候,树的每一项都不勾选;

当选树的其中一项时,全选按钮是半选状态;

实现效果如下:

<template><div class="app-container vehContractList"><-- 我省略了表格。这个在这里代表表格每一行的数据:scope.row --><el-button type="text" @click="handleAdd(scope.row)">配置ID</el-button><el-dialog:title="title":visible.sync="open"width="896px"append-to-body:close-on-click-modal="false"><el-formref="form":model="form":rules="rules"label-width="120px":hide-required-asterisk="false"><el-row :gutter="10"><el-col :span="16"><span style="position: absolute; left: 65px; top: 59px;font-size: 14px;color: #ff6d6d; margin-right: 4px;">*</span><el-form-itemlabel="选择树ID"><!-- prop="itemIds" --><el-row class="elRowCount"><el-col :span="12"><el-checkboxv-model="checkAll":indeterminate="isIndeternimate"@change="handleCheckAll">全选/全不选</el-checkbox></el-col></el-row><el-row class="elRowTree"><el-treeref="itemTree"v-loading="loading4":data="itemTreeData":filter-node-method="filterNode"show-checkboxnode-key="id"default-expand-all:props="defaultProps":default-checked-keys="checkDefaultForItem":expand-on-click-node="false"class="customDisableTree"@check="handleNodeClickForItem"/></el-row><div v-if="noCheck" class="el-form-item__error">请选择</div></el-form-item></el-col></el-row></el-form><divslot="footer"class="dialog-footer"><el-buttontype="primary"@click="submitForm">保 存</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog&

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

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

相关文章

动态规划——浅谈dp如何入门,以及入门题目(值得收藏,持续更新)

前言 动态规划如何入门?如果你问我怎么精通,那我只能告诉你我也不知道,但你要问我怎么入门,那我就可以和你说道说道了. 我并没有能力也不想说你看完就会了,我只是想给大家开个头,你只要知道怎么写了怎么去思考了,你就可以通过刷题来强化思维了,能走多远就看各位的造化了! 动…

从头搭hadoop集群--分布式hadoop集群搭建

模板虚拟机安装配置见博文&#xff1a;https://blog.csdn.net/weixin_66158110/article/details/139236148 配置文件信息如下&#xff1a;https://pan.baidu.com/s/1074eD5aNVugEPcjwVvi9jA?pwdl1xq&#xff08;提取码&#xff1a;l1xq&#xff09; hadoop版本&#xff1a;h…

“论软件架构风格”必过范文,突击2024软考高项论文

论文真题 软件体系结构风格是描述某一特定应用领域中系统组织方式的惯用模式。体系结构风格定义一个系统家族&#xff0c;即一个体系结构定义一个词汇表和一纽约束。词汇表中包含一些构件和连接件类型&#xff0c;而这组约束指出系统是如何将这些构件和连接件组合起来的。体系…

慧天卓特:东南亚基于多源遥感的干旱、土壤水分及洪灾、植被指数、火灾监测和空气质量监测分析

概述 亚洲的东南部地理位置具有特殊的意义&#xff0c;是亚洲纬度最低的地区&#xff0c;也处于亚澳之间的过渡地带&#xff0c;属热带季风气候&#xff0c;森林等自然资源丰富&#xff0c;人口稠密&#xff0c;东南亚和南亚地区面临农业生产、环境保护和经济发展的多重挑战&a…

短视频系列内容生产技能提升 沈阳短视频剪辑培训

优势&#xff1a;一、短视频系列化内容的优势 ①可持续性强 某一条视频效果很好(几十万点赞)时&#xff0c;按照相同格式继续输出非常容易成功: √不需要设计脚本&#xff1b; √不需要重新定制。 √稳定性强&#xff0c; ②节约时间成本和制作成本 举例对标账号&#xf…

随身WiFi十大热门品牌优缺点分析!哪个品牌的随身wifi更值得买?随身wifi推荐测评!

格行随身wifi 【品牌特点】&#xff1a;服务好&#xff0c;性价比高&#xff0c;随身WiFi行业的“海底捞” 【优点】&#xff1a;专注物联网行业15年&#xff0c;产品和服务双驱动&#xff0c;综合实力和客户口碑领先 【缺点】&#xff1a;产品相对聚焦&#xff0c;产品类型…

小程序中实现自定义头部导航组件

在页面中实现自定义头部导航的组件&#xff0c;如果仅是单个页面中需要自定义可在页面的json文件中配置"navigationStyle": “custom”&#xff0c;如果是项目中所有页面都想使用自定义的组件&#xff0c;可在app.json的window中全局配置"navigationStyle"…

VUE3 学习笔记(12):对比Vuex与Pinia状态管理的基本理解

在组件传值中&#xff0c;当嵌套关系越来越复杂的时候必然会将混乱&#xff0c;是否可以把一些值存在一个公共位置&#xff0c;无须传值直接调用呢&#xff1f;VUEX应运而生&#xff0c;但是从VUE3开始对VUEX的支持就不那么高了&#xff0c;官方推荐使用Pinia。 Vuex配置 ST1:…

深度剖析可视化大屏的技术架构

在当今信息化时代&#xff0c;可视化大屏作为一种重要的信息展示方式&#xff0c;广泛应用于监控指挥中心、数据分析展示等领域。其技术架构对于保障大屏系统的稳定性和性能至关重要。本文将深入探讨可视化大屏的技术架构&#xff0c;包括硬件架构、软件架构和数据架构等方面&a…

VCAST创建单元测试工程

1. 设置工作路径 选择工作目录,后面创建的 UT工程 将会生成到这个目录。 2. 新建工程 然后填写 工程名称,选择 编译器,以及设置 基础路径。注意 Base Directory 必须要为代码工程的根目录,否则后面配置环境会失败。 这样工程就创建好了。 把基础路径设置为相对路径。 …

探索 Adobe Illustrator 2023 (AI 2023) for Mac/Win——创意设计的强大工具

Adobe Illustrator 2023 (AI 2023) for Mac/Win 是一款在设计领域备受推崇的专业矢量图形编辑软件软件&#xff0c;为设计师们提供了无尽的创意可能性。 它具有强大而精确的绘图功能&#xff0c;让用户能够轻松绘制出各种复杂的图形、线条和形状。无论是简洁的图标设计还是精美…

私立学校当老师稳定吗

作为一名在教育领域摸爬滚打多年的老师&#xff0c;经常会被问到这个问题。私立学校当老师&#xff0c;稳定吗&#xff1f;这个问题没有答案&#xff0c;因为有太多种影响因素&#xff0c;比如学校的管理、个人的职业规划以及教育市场的现状。 私立学校的工作环境通常比公立学校…

代码随想录算法训练营第四十二 | ● 01背包问题,你该了解这些! ● 01背包问题,你该了解这些! 滚动数组 ● 416. 分割等和子集

** 01背包问题 二维 ** 01背包问题 二维 https://programmercarl.com/%E8%83%8C%E5%8C%85%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%8001%E8%83%8C%E5%8C%85-1.html 视频讲解&#xff1a;https://www.bilibili.com/video/BV1cg411g7Y6 #include <bits/stdc.h> using namespace …

九、参数处理器

debug调试&#xff0c;一个参数的调通了&#xff0c;但是两个参数的会失败 总结一下&#xff1a; 到现在已经学了有10节了&#xff0c;我对mybatis底层的执行流程算是挺了解的了&#xff0c;把流程拆解开&#xff0c;每一个小步骤都是非常多的代码实现&#xff0c;代码都能看懂…

【Python】 探索Pytz库中的时区列表

基本原理 Python 是一种广泛使用的高级编程语言&#xff0c;它提供了许多库来帮助开发者完成各种任务。在处理时间和日期时&#xff0c;pytz 库是一个非常重要的工具。pytz 是一个提供时区处理功能的Python库&#xff0c;它允许开发者在Python中使用时区信息。 pytz 库基于 I…

2021JSP普及组第二题:插入排序

2021JSP普及组第二题 题目&#xff1a; 思路&#xff1a; 题目要求排序后根据操作进行对应操作。 操作一需要显示某位置数据排序后的位置&#xff0c;所以需要定义结构体数组储存原数据的位置和数据本身排序后所得数据要根据原位置输出排序后的位置&#xff0c;所以建立一个新…

新手快速上手IDEA【常用快捷键】

目录 一、常用二、进阶&#xff08;提高编码速度&#xff09;三、其他四、查找、替换与关闭最后 一、常用 说明快捷键复制代码ctrl c粘贴ctrl v剪切ctrl x撤销ctrl z反撤销ctrl shift z保存-save allctrl s全选-select allctrl a 二、进阶&#xff08;提高编码速度&a…

Android开机动画,framework修改Bootanimation绘制文字。

文章目录 Android开机动画&#xff0c;framework修改Bootanimation动画绘制文字。opengl绘制源码分析 Android开机动画&#xff0c;framework修改Bootanimation动画绘制文字。 frameworks/base/cmds/bootanimation/bootanimation.cpp 绘制时间的一个方法 // We render 12 or …

Linux网络编程:数据链路层协议

目录 前言&#xff1a; 1.以太网 1.1.以太网帧格式 1.2.MTU&#xff08;最大传输单元&#xff09; 1.2.1.IP协议和MTU 1.2.2.UDP协议和MTU 1.2.3.TCP协议和MTU 2.ARP协议&#xff08;地址解析协议&#xff09; 2.1.ARP在局域网通信的角色 2.2.ARP报文格式 2.3.ARP报文…

数据库中锁的机制和MVCC协议以及隔离级别

文章目录 数据库中的锁锁与索引的关系释放锁的时机乐观锁与悲观锁行锁与表锁共享锁与排它锁意向锁记录锁、间隙锁和临键锁记录锁间隙锁临键锁 锁优化方案 MVCC协议MySQL的隔离级别脏读和幻读快照读和当前读 版本链Read ViewRead View 与已提交读Read View 与可重复读m_up_limit…