el-table树形表格实现复选框多选效果

news2024/10/7 14:29:08

2023.7.26今天我学习了如何使用树形表格的时候进行复选框的多选效果。

当我们使用树形结构表格需要进行多选功能操作的时候会发现点击全选的时候,只有一级表格数据会被选中,问题如图:

我们需要实现的是点击全选的不管是几级表格数据都可以被选中。

处理方法如下:

html代码如下:

 <el-table :data="typeList" :key="curryId"  row-key="id"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              ref="table"
              @selection-change="selection_all_operation_record"
              @select-all="handleSelectAll"
    >

</el-table>

 js代码如下:

methods:{

  handleSelectAll() {
      for (let item of this.typeList) {
        this.selectChildren(item)
      }
    },
    selectChildren(item) {
      if (item.children != null) {
        for (let childItem of item.children) {
          this.selectChildren(childItem)
          this.$refs.table.toggleRowSelection(childItem)
        }
      }
    },
}

通过递归的方式来给每一层数据都可以被选中。

效果如下:

 

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

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

相关文章

ElasticSearch之IK分词器安装以及使用介绍

文章目录 一、IK 分词器简介1. 支持细粒度分词&#xff1a;2. 支持多种分词模式&#xff1a;3. 支持自定义词典&#xff1a;4. 支持拼音分词&#xff1a;5. 易于集成和使用&#xff1a; 二、安装步骤1、下载 IK 分词器插件&#xff1a;2、安装 IK 分词器插件&#xff1a;3. 安装…

各种知名游戏的技术分析

介绍一个GitHub&#xff0c;里面包括了市面上的各种游戏的技术分析&#xff0c;包括渲染管线、工作流、技术文章等等&#xff0c;在做某个类型的游戏的时候&#xff0c;可以针对某个游戏去进行技术参考&#xff0c;特别实用。 GitHub - OTFCG/Awesome-Game-Analysis: a compre…

C++设计模式之模板方法、策略模式、观察者模式

面向对象设计模式是”好的面向对象设计“&#xff0c;所谓”好的面向对象设计“指的是可以满足”应对变化&#xff0c;提高复用“的设计。 现代软件设计的特征是”需求的频繁变化“。设计模式的要点是”寻求变化点&#xff0c;然后在变化点处应用设计模式&#xff0c;从而更好地…

力扣天天练--week3-LeetCode75

topic75-9-t443:压缩字符串 题目描述&#xff1a; 给你一个字符数组 chars &#xff0c;请使用下述算法压缩&#xff1a; 从一个空字符串 s 开始。对于 chars 中的每组 连续重复字符 &#xff1a; 如果这一组长度为 1 &#xff0c;则将字符追加到 s 中。 否则&#xff0c;需…

Spring Boot中整合MyBatis(基于xml方式基于注解实现方式)

一、前提准备 在Spring Boot中整合MyBatis时&#xff0c;你需要导入JDBC&#xff08;不需要手动添加&#xff09;和Druid的相关依赖。 JDBC依赖&#xff1a;在Spring Boot中整合MyBatis时&#xff0c;并不需要显式地添加JDBC的包依赖。这是因为&#xff0c;当你添加mybatis-sp…

会捷通云视讯 list 目录文件泄露漏洞

劳动永远是医治精神创伤的良药。 漏洞描述 会捷通云视讯某个文件 list参数 存在目录文件泄露漏洞&#xff0c;攻击者通过漏洞可以获取一些敏感信息 漏洞复现 构造payload访问漏洞url&#xff1a; /him/api/rest/V1.0/system/log/list?filePath../漏洞证明&#xff1a; 文…

Mendix 创客访谈录|综合业务展示大屏应用开发

本期创客 刘书智 西门子工业领域专家 我在西门子工厂自动化工程有限公司工作。一直从事SCADA产品的技术支持工作&#xff0c;已经过去17个年头了。赶上数字化发展的浪潮&#xff0c;不断学习各种IT技术&#xff0c;践行 IT与OT融合&#xff0c;希望借助自己的IT知识助力OT的发…

编程实战班--C语言和Python语言实现五子棋游戏的代码

文章目录 下面分别是C语言和Python语言实现五子棋游戏的代码&#xff1a;C语言实现Python语言实现总结 下面分别是C语言和Python语言实现五子棋游戏的代码&#xff1a; C语言实现 在使用C语言实现五子棋游戏时&#xff0c;可以使用SDL2图形库来实现图形界面和图形绘制等功能&…

华为华三思科 交换机基础配置一览

console密码修改 华为 user-interface console 0 authentication-mode password set authentication password cipher XXXXXXXXX华三 line aux 0 authentication-mode password set auth pass simple XXX思科 en configure terminal line console 0 password 123 login忘记…

打开英雄联盟提示d3dcompiler47.dll缺失怎么修复

1.d3dcompiler_47.dll缺失的原因 损坏的文件&#xff1a;d3dcompiler_47.dll文件可能由于某些原因损坏&#xff0c;如病毒感染、意外删除等。 不兼容的操作系统&#xff1a;某些应用程序要求特定版本的d3dcompiler_47.dll文件&#xff0c;如果操作系统不兼容&#xff0c;则可能…

前端实现导出excel表格(单行表头)

需求&#xff1a;实现勾选行导出为表格 一、安装插件 npm install --save file-saver xlsx运行项目报如下警告的话 运行npm install xlsx0.16.0 --save 来降低版本号&#xff08;最初我安装的版本号是0.18.16的版本&#xff09;再次运行项目就不会报如下警告了 二、新建一个ex…

语音分帧简述

目录 1. 分帧 1.1 非整齐分帧 1.2 整齐分帧 2. 示例代码 1. 分帧 问题1&#xff1a;总帧数如何计算&#xff1f; 记符号N为语音总长度&#xff0c;FRAME_LEN为帧长&#xff0c;OVERLAP_LEN为帧与帧之间的重叠部分&#xff0c;STEP_LEN为帧移(步长)。则总帧数N_Frames计算…

kotlin 编写一个简单的天气预报app(二)

增加界面显示openweathermap返回的信息。 在activity_main.xml里增加输入框来输入城市&#xff0c;在输入款旁边增加搜索按钮来进行查询。 然后原来显示helloworld的TextView用来显示结果。 1. 增加输入城市名字的EditText <EditTextandroid:id"id/editTextCity"…

AcrelEMS企业微电网能效管理平台实现用户侧智能配电和智能用电管理-安科瑞黄安南

摘要&#xff1a;随着科技的发展&#xff0c;电力系统正逐步向智能化、数字化、互联网化迈进。智能配电与智能用电是电力产业发展的重要方向&#xff0c;将为传统电力系统带来革命性的变革。本文将对智能配电和智能用电的概念、特点、关键技术及应用进行详细介绍。 1、智能配电…

Rust vs Go:常用语法对比(八)

题目来自 Golang vs. Rust: Which Programming Language To Choose in 2023?[1] 141. Iterate in sequence over two lists Iterate in sequence over the elements of the list items1 then items2. For each iteration print the element. 依次迭代两个列表 依次迭代列表项1…

【linux基础(一)】Linux基本指令(上)

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Linux从入门到开通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学更多操作系统知识   &#x1f51d;&#x1f51d; 这里写目录标题 1. 前言1. 创…

[vulnhub]DC2

文章目录 [vulnhub]DC2信息收集flag1flag2cewlwpscan flag3什么是rbash&#xff1f; flag4flag5git提权 总结 [vulnhub]DC2 信息收集 扫ip&#xff0c;有两种方式&#xff1a;arp、nmap nmap -sP 192.168.56.0/24 -T4arp-scan -l192.168.56.137 扫端口&#xff1a; nmap -…

1312. 让字符串成为回文串的最少插入次数;971. 翻转二叉树以匹配先序遍历

1312. 让字符串成为回文串的最少插入次数 核心思想&#xff1a;最后的回文串有两种情况&#xff0c;一种是奇数回文串&#xff0c;一种是偶数回文串&#xff0c;奇数回文串的中心一定是原来就有的&#xff0c;偶数回文串的中心也是原来就有的。假设除去中心的部分为q,p,最后要…

Debian12中为python3配置虚拟环境及在Pycharm中使用虚拟环境

在Debian 12中&#xff0c;python默认为python 3.11。 基于应用&#xff0c;现需设置虚拟环境。 1.安装venv模块 从python3.3开始&#xff0c;配置python虚拟环境&#xff0c;可用venv模块&#xff0c;更加方便了。 执行命令&#xff1a; #apt install python3.11-venv 2.…

原型模式——对象的克隆

1、简介 1.1、概述 可以通过一个原型对象克隆出多个一模一样的对象&#xff0c;该模式被称为原型模式。 在使用原型模式时&#xff0c;需要首先创建一个原型对象&#xff0c;再通过复制这个原型对象来创建更多同类型的对象。 1.2、定义 原型模式&#xff08;Prototype Patt…