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

vue3+element Plus 清空el-tree复选框选中项

前提问题:el-tree加了show-checkbox复选框属性后,在选择完复选框后切换,不会自动清空选中内容,要求在切换时清空复选框选中内容,
解决过程:设置el-tree的ref值,使用setCheckedKeys方法可清空复选框所选中的内容
解决方法:

html:

<el-treehighlight-current:data="props.menuData"@node-click="handleClick"@node-expand="showPushData"ref="treeRef":expand-on-click-node="false"node-key="id":default-expanded-keys="props.expandIdList":show-checkbox="state.switchRelate":props="{ disabled: disabledNodeClass, class: customNodeClass }":check-strictly="false"@check="getChecked"
>
</el-tree>
<div class="relateBtn"><el-button type="primary" @click="switch">切换</el-button>
</div>

 js:

const switch= () => {//清空复选框勾选内容treeRef.value.setCheckedKeys([])
}

注意:1.el-tree的node-key属性一定要有,我第一次写的是node-key="type"时setCheckedKeys未生效,后改为node-key="id"生效。
           2.原本写node-key="type"是为了default-expanded-keys属性自动展开时,依据type值展开,但因为这样写setCheckedKeys不生效所以改成了id,default-expanded-keys给的值可以是一个变量,将type为某某值的id全部放到一个数组里传到该属性中也可达到同样的自动展开效果。

相关文章:

vue3+element Plus 清空el-tree复选框选中项

前提问题&#xff1a;el-tree加了show-checkbox复选框属性后&#xff0c;在选择完复选框后切换&#xff0c;不会自动清空选中内容&#xff0c;要求在切换时清空复选框选中内容&#xff0c;解决过程&#xff1a;设置el-tree的ref值&#xff0c;使用setCheckedKeys方法可清空复选…...

【VScode】设置语言为中文

1、下载安装好vscode 2、此时可看到页面为英文&#xff0c;为方便使用可切换为中文 3、键盘按下 ctrlshiftP 4、在输入框内输入configure display language 5、选择中文&#xff0c;restart即可&#xff08;首次会有install安装过程&#xff0c;等待安装成功后重启即可&am…...

C++ Qt开发:TableWidget表格组件

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍TableWidget表格组件的常用方法及灵活运用。 …...

layui框架实战案例(25):table组件筛选列记忆功能

即点击当前表格右上角筛选图标后&#xff0c;对表头进行显示隐藏勾选&#xff0c;再刷新页面依然保留当前筛选状态。 要实现layui表格组件的筛选列记忆功能&#xff0c;可以采取以下步骤&#xff1a; 存储筛选数据&#xff1a;当用户进行筛选操作时&#xff0c;将筛选的数据…...

20、WEB攻防——PHP特性缺陷对比函数CTF考点CMS审计实例

文章目录 一、PHP常用过滤函数&#xff1a;1.1 与1.2 md51.3 intval1.4 strpos1.5 in_array1.6 preg_match1.7 str_replace CTFshow演示三、参考资料 一、PHP常用过滤函数&#xff1a; 1.1 与 &#xff1a;弱类型对比&#xff08;不考虑数据类型&#xff09;&#xff0c;甚至…...

互换数组的两个轴 numpy.swapaxes()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 互换数组的两个轴 numpy.swapaxes() 选择题 请问下列程序运行的的结果是&#xff1a; import numpy as np arr1 np.array([[11,12],[21,22]]).reshape((2,2)) print("【显示】arr1:\n…...

金蝶云星空修改业务对象标识

文章目录 金蝶云星空修改业务对象标识说明解决方案具体操作实操 金蝶云星空修改业务对象标识 说明 一个业务对象的产生&#xff0c;涉及10个表起。 解决方案 还是手工删除重新创建保险。 具体操作 先备份需要删除的元数据&#xff0c;或者扩展&#xff0c;然后重新创建或…...

【PHP入门】2.1-运算符

-运算符- 运算符&#xff1a;operator&#xff0c;是一种将数据进行运算的特殊符号&#xff0c;在PHP中一共有十种运算符之多。 2.1.1赋值运算符 赋值运算&#xff1a;符号是“”&#xff0c;表示将右边的结果&#xff08;可以是变量、数据、常量和其它运算出来的结果&#…...

【Hive】——DML

1 Load&#xff08;加载数据&#xff09; 1.1 概述 1.2 语法 LOAD DATA [LOCAL] INPATH filepath [OVERWRITE] INTO TABLE tablename [PARTITION (partcol1val1, partcol2val2 ...)]LOAD DATA [LOCAL] INPATH filepath [OVERWRITE] INTO TABLE tablename [PARTITION (partcol…...

【Spring教程31】SSM框架整合实战:从零开始学习SSM整合配置,如何编写Mybatis SpringMVC JDBC Spring配置类

目录 1 流程分析2 整合配置2.1 步骤1&#xff1a;创建Maven的web项目2.2 步骤2:添加依赖2.3 步骤3:创建项目包结构2.4 步骤4:创建SpringConfig配置类2.5 步骤5:创建JdbcConfig配置类2.6 步骤6:创建MybatisConfig配置类2.7 步骤7:创建jdbc.properties2.8 步骤8:创建SpringMVC配置…...

Tailwind CSS 入门

什么是 Tailwind CSS? Tailwind CSS 是一个 CSS 框架,它提供了大量的预定义实用类,可以用来快速构建 HTML 页面。Tailwind CSS 的优势包括: 可扩展性:Tailwind CSS 的类库是可扩展的,可以根据自己的需要进行定制。性能:Tailwind CSS 的类库是经过精心设计的,可以提高页…...

如何在简历中解释就业空白

您的工作经历有空缺吗&#xff1f;你不是一个人。有很多合理的理由可以解释为什么你需要休息一下。更重要的是&#xff0c;在一份真实正确的简历中&#xff0c;这些问题是无法避免的。直接解释就业差距总是更好&#xff0c;而且有很多因素需要考虑。你未来的老板想要了解工作轨…...

【计算机网络】TCP协议——2.连接管理(三次握手,四次挥手)

目录 前言 一. 建立连接——三次握手 1. 三次握手过程描述 2. TCP连接建立相关问题 二. 释放连接——四次挥手 1. 四次挥手过程描述 2. TCP连接释放相关问题 三. TCP状态转换 结束语 前言 TCP——传输控制协议(Transmission Control Protocol)。是一种面向连接的传…...

螺丝厂家:如何根据您的需求找到合适您的紧固件

螺丝是通用工具。它们几乎用于所有场景&#xff0c;并且它们的使用不限于任何一个行业。人们可以找到几乎所有周围都使用的螺钉和螺栓。在为工作选择合适的螺丝方面&#xff0c;人们应该记住一些事情。选择标准归结为紧固件的物理特性&#xff0c;包括制造它所用的原材料、施加…...

企业数字化转型进入深海区:生成式AI时代下如何制定数据战略

随着科技的不断进步&#xff0c;企业数字化转型已经不再是简单的概念&#xff0c;而是正在进入一个全新的深海区。在这个深海区&#xff0c;数据变得至关重要&#xff0c;而生成式人工智能&#xff08;AI&#xff09;的兴起更是推动了数字化转型的飞速发展。本文将探讨在这个生…...

html行内元素和块级元素的区别?

HTML中的元素可以分为两种类型&#xff1a;行内元素&#xff08;inline&#xff09;和块级元素&#xff08;block&#xff09; 文章目录 什么是行内元素什么是块级元素元素转换行内元素转块级元素块级元素转行内元素 区别总结 什么是行内元素 HTML的行内元素&#xff08;inli…...

ResNet 原论文及原作者讲解

ResNet 论文摘要1. 引入2. 相关工作残差表示快捷连接 3. 深度残差学习3.1. 残差学习3.2. 快捷恒等映射3.3. 网络体系结构普通网络 plain network残差网络 residual network 3.4. 实施 4. 实验4.1. ImageNet分类普通的网络 plain network残差网络 residual network恒等vs.快捷连…...

liteflow规则引擎 执行Groovy脚本

在LiteFlow规则引擎中执行Groovy脚本的步骤相对简单。首先&#xff0c;确保你的项目中包含了LiteFlow的相关依赖。接下来&#xff0c;创建一个Groovy脚本规则&#xff0c;并使用LiteFlow引擎执行它。 以下是一个简单的示例&#xff1a; 添加LiteFlow依赖&#xff1a;在你的项…...

GZ015 机器人系统集成应用技术样题5-学生赛

2023年全国职业院校技能大赛 高职组“机器人系统集成应用技术”赛项 竞赛任务书&#xff08;学生赛&#xff09; 样题5 选手须知&#xff1a; 本任务书共 24页&#xff0c;如出现任务书缺页、字迹不清等问题&#xff0c;请及时向裁判示意&#xff0c;并进行任务书的更换。参赛队…...

Spark编程实验二:RDD编程初级实践

目录 一、目的与要求 二、实验内容 三、实验步骤 1、pyspark交互式编程 2、编写独立应用程序实现数据去重 3、编写独立应用程序实现求平均值问题 4、三个综合实例 四、结果分析与实验体会 一、目的与要求 1、熟悉Spark的RDD基本操作及键值对操作&#xff1b; 2、熟悉使…...

CleanMyMac X这一款mac电脑清理垃圾文件软件好用吗?

CleanMyMac X您的 Mac。极速如新。点按一下&#xff0c;即可优化调整整个 Mac畅享智能扫描 — 这款超级简单的工具用于优化您的 Mac。只需点按一下&#xff0c;即可运行所有任务&#xff0c;让您的 Mac 保持干净、快速并得到最佳防护。CleanMyMac 是一款功能强大的 Mac 清理程序…...

四通道 DMOS 全桥驱动MS35631N/MS35631

MS35631N/MS35631 是一款四通道 DMOS 全桥驱动器&#xff0c;可以驱动两 个步进电机或者四个直流电机。每个全桥的驱动电流在 24V 电源下可以 达到 1.2A 。 MS35631N/MS35631 集成了固定关断时间的 PWM 电流校正 器&#xff0c;以及一个 2bit 的非线性 DAC &…...

JWT令牌的作用和生成

JWT令牌&#xff08;JSON Web Token&#xff09;是一种用于身份验证和授权的安全令牌。它由三部分组成&#xff1a;头部、载荷和签名。 JWT令牌的作用如下&#xff1a; 身份验证&#xff1a;JWT令牌可以验证用户身份。当用户登录后&#xff0c;服务器会生成一个JWT令牌并返回…...

elementui el-pagination分页组件查询的时候当前页不更新

elementui el-pagination分页组件查询的时候当前页不更新 <mypagination v-if"pageshow" :currentPage.sync"pageNum" :pagesize"pageSize" :pagetotal"pageTotal" pagefunc"pageFunc"></mypagination>1.在加的…...

C++——C++11(1)

时至今日&#xff0c;C标准已经到了C23&#xff0c;但是你要说哪一次提出的标准最经 典&#xff0c;那C11一定会被人提及&#xff0c;C11带来了数量可观的变化&#xff0c;其中包 含了约140个新特性&#xff0c;以及对C03标准中约600个缺陷的修正&#xff0c;这使得 C11更像是从…...

CoPilot究竟如何使用?

基本步骤说明 CoPilot是一款由GitHub开发的人工智能代码助手&#xff0c;可以提供实时代码建议和自动完成功能。下面是使用CoPilot的详细介绍&#xff1a; 安装&#xff1a;首先&#xff0c;你需要在你的代码编辑器中安装CoPilot插件。目前&#xff0c;CoPilot支持一些主流的代…...

前端(三)

1.表格标签 数据展示: jason 123 read egon 123 dbj tank 123 hecha ... <table> <thead><tr> 一个tr就表示一行<th>username</th> 加粗文本<td>username</td> 正常文本</tr></thead> 表头(字段信息)<tbody>…...

Maven知识

文章目录 一、概念1、官方文档2、什么是Maven&#xff1f; 二、相关知识1、Maven生命周期1.1、clean1.2、default1.3、site 2、Pom文件3、Pom常用元素3.1、项目基本元素3.2、<properties\></properties\>3.3、pom继承相关3.4、依赖管理相关3.5、构建管理相关3.6、&…...

美颜SDK是什么?视频美颜SDK在直播平台中的集成与接入教程详解

当下&#xff0c;主播们追求更加自然、精致的外观&#xff0c;而观众也期待在屏幕前欣赏到更为清晰、美丽的画面。为了满足这一需求&#xff0c;美颜SDK应运而生&#xff0c;成为直播平台的重要利器之一。 一、什么是美颜SDK&#xff1f; 通过美颜SDK&#xff0c;开发者可以…...

CSS基础面试题

介绍一下标准css盒子模型与低版本IE的盒子模型&#xff1f; 标准盒子模型&#xff1a;宽度内容的宽度&#xff08;content&#xff09; border padding margin 低版本IE盒子模型&#xff1a;宽度内容宽度&#xff08;contentborderpadding&#xff09; margin box-sizing 属性…...