vue的elementUI的el-tree的选择

news2025/1/21 8:52:53

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

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

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

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

实现效果如下:

<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-form
        ref="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-item
              label="选择树ID"
            >
              <!-- prop="itemIds" -->
              <el-row class="elRowCount">
                <el-col :span="12">
                  <el-checkbox
                    v-model="checkAll"
                    :indeterminate="isIndeternimate"
                    @change="handleCheckAll"
                  >全选/全不选
                  </el-checkbox>
                </el-col>
              </el-row>
              <el-row class="elRowTree">
                <el-tree
                  ref="itemTree"
                  v-loading="loading4"
                  :data="itemTreeData"
                  :filter-node-method="filterNode"
                  show-checkbox
                  node-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>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="submitForm"
        >
          保 存
        </el-button>
        <el-button @click="cancel">
          取 消
        </el-button>
      </div>
    </el-dialog&

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

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

相关文章

JVM(Java虚拟机)、JMM(Java内存模型)笔记

面试常见&#xff1a; 请你谈谈你对JVM的理解?java8虚拟机和之前的变化更新?什么是OOM&#xff0c;什么是栈溢出StackOverFlowError? 怎么分析?JVM的常用调优参数有哪些?内存快照如何抓取&#xff1f;怎么分析Dump文件&#xff1f;谈谈JVM中&#xff0c;类加载器你的认识…

上位机图像处理和嵌入式模块部署(f407 mcu开发板基本测试)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 我们拿到一个新的开发板之后&#xff0c;一般都需要测试一下基本功能。这里面一部分功能是我们比较熟悉的&#xff0c;比如说led、key输入、串口、…

计算机网络学习2

文章目录 信道复用技术 第三章数据链路层概述数据链路层的三个重要问题封装成帧和透明传输差错检测可靠传输的相关基本概念可靠传输的实现机制停止等待协议回退N帧协议选择重传协议 点对点协议PPP共享式以太网网络适配器和MAC地址CSMA_CD协议的基本原理共享式以太网的争用期共享…

跨平台数据整合:电商企业如何获取多渠道销售数据

跨平台数据整合对于电商企业而言&#xff0c;是获取多渠道销售数据、提升市场竞争力、优化销售策略的关键环节。以下将从数据来源、数据获取方式、数据整合策略以及整合后的应用等方面&#xff0c;详细阐述电商企业如何进行跨平台数据整合&#xff0c;以获取多渠道销售数据。 一…

C51学习归纳4 --- 矩阵键盘

一、开发板原理图 我们可以看到这个键盘是4*4的&#xff0c;行可以由4个数据接口接收&#xff08;P1_4~7&#xff09;&#xff0c;列可以由4个数据接口接收&#xff08;P1_0~3)。 所以我们可让行作为扫描方向&#xff0c;或者列作为扫描方向&#xff0c;进行按键扫描。如何扫描…

银行风控建模

风控简介 所谓风险控制&#xff08;风控&#xff09;&#xff0c;即针对用户风险进行管理规避的过程。 贷前阶段&#xff1a; 这一阶段的数据来源主要分为申请信息、历史消费信息、外部信息&#xff08;例如多投借贷、公积金等&#xff09;。常用风控模型包括&#xff1a; 1…

『 Linux 』文件系统

文章目录 磁盘构造磁盘抽象化 磁盘的寻址方式磁盘控制器磁盘数据传输文件系统Inode数据块(Data Blocks)超级块(SuperBlock)块组描述符(Group Descriptor)格式化 磁盘构造 磁盘内部构造由磁头臂,磁头,主轴,盘片,盘面,磁道,柱面,扇区构成; 磁头臂&#xff1a;控制磁头的移动,可以…

WowTab:简洁界面,效率神器,重塑新标签页浏览体验

目录 一、插件简介 二、插件功能 2.1 支持两种模式切换 2.2 效率组件介绍 2.3 设置中心 三、使用总结 四、插件安装说明 4.1 Edge安装 4.2 Chrome安装 大家在日常办公当中&#xff0c;是不是觉得新标签页太平淡无奇&#xff1f;来&#xff0c;给自己的浏览器加点料&…

uniapp学习(001 前期介绍)

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战&#xff0c;开发打包微信小程序、抖音小程序、H5、安卓APP客户端等 总时长 23:40:00 共116P 此文章包含第1p-第p10的内容 简介 目录结构 效果 打包成小程序 配置开发者工具 打开安全按钮 使用uniapp的内置组件…

计算机网络学习实践:模拟PPP协议验证虚拟局域网(VLAN)

计算机网络实践&#xff1a;模拟PPP协议&&验证虚拟局域网&#xff08;VLAN&#xff09; 挺有意思的大家可以跟着做一做&#xff0c;我是跟着韩志刚老师的视频做的 https://www.bilibili.com/video/BV1Qr4y1N7cH?p31&vd_source7831c5b97cfc5c745eb48ff04f6515e7 …

PostgreSQL 17 Beta1 发布,酷克数据再次贡献核心力量

得益于全球的开发者贡献&#xff0c;PostgreSQL已成长为一款拥有众多全球用户和贡献者、成熟稳定的开源数据库。2024年5月23日&#xff0c;PostgreSQL全球开发组宣布&#xff0c;PostgreSQL 17的首个 Beta 版本现已开放下载。本次新版本带来了众多惊喜。值得一提的是&#xff0…

算法金 | 再见,PCA 主成分分析!

1. 概念&#xff1a;数据降维的数学方法 定义 主成分分析&#xff08;PCA&#xff09;是一种统计方法&#xff0c;通过正交变换将一组可能相关的变量转换为一组线性不相关的变量&#xff0c;这组新的变量称为主成分。大白话&#xff0c;PCA能够从数据中提取出最重要的特征&am…

深入JVM:全面解析GC调优

文章目录 深入JVM&#xff1a;全面解析GC调优一、序言二、GC调优指标三、GC在线监控1、Jstat工具2、VisualVM工具 四、GC日志分析1、收集GC日志2、GCViewer工具3、GCeasy工具 五、GC问题调优1、调整JVM内存大小&#xff08;1&#xff09;调整堆内存大小及比例&#xff08;2&…

从头搭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…

行车记录仪人体感应雷达开关模块,飞睿智能雷达模块穿透玻璃、告别漏触烦恼,安防停车监控新方案

随着汽车保有量的持续增长&#xff0c;行车记录仪作为汽车安全配件的必备品&#xff0c;其重要性日益凸显。然而&#xff0c;传统的行车记录仪传感器在停车时往往存在无法穿透玻璃、漏触等问题&#xff0c;给车主带来了诸多不便和安全隐患。本文将深入探讨停车场景下&#xff0…

2024年清洁能源与可持续发展国际会议(ICDESMF 2024)

2024 International Conference on Clean Energy and Sustainable Development 【1】大会信息 会议简称&#xff1a;ICDESMF 2024 大会时间&#xff1a;2024-07-22 大会地点&#xff1a;中国大理 截稿时间&#xff1a;2024-07-08(以官网为准&#xff09; 审稿通知&#xff1a…

【云原生】Kubernetes----POD控制器

目录 引言 一、Pod控制器概述 二、Pod控制器的种类 &#xff08;一&#xff09;ReplicaSet &#xff08;二&#xff09;Deployment &#xff08;三&#xff09;StatefulSet &#xff08;四&#xff09;DaemonSet &#xff08;五&#xff09;Job 三、使用POD控制器 &a…

五、nodejs存储图片

nodejs存储图片 // 静态托管和数据库创建 创建数据库 新建Public进行静态托管 新建个img的文件夹 在index.js里 // 托管静态 app.use(/public, express.static(./Public))//托管静态资源 /*** 1.引入一个express框架* 2.在加载所有服务模块前&#xff0c;要先连接数据库* …

MySQL是怎么保证持久性的(redo log日志相关)

Mysql中 事务的很多实现&#xff0c;都是因为有日志的支撑&#xff0c;比如binlog、undo log、redo log等 MySQL是怎么保证持久性的 持久性是指&#xff0c;事务一旦提交&#xff0c;它对数据库的改变就应该是永久性的&#xff0c;接下来的其他操作或故障不能对其有影响。In…

Java(十)——内部类

文章目录 内部类静态内部类实例内部类匿名内部类局部内部类 内部类 Java内部类是一种特殊的类定义方式&#xff0c;它允许在一个类的内部定义另一个类。 内部类可以访问其所在外部类的成员变量和成员方法&#xff0c;这使得它非常适用于封装与外部类紧密相关的私有逻辑。 内…