当前位置: 首页 > 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全部放到一个数组里传到该属性中也可达到同样的自动展开效果。

http://www.lryc.cn/news/262930.html

相关文章:

  • 【VScode】设置语言为中文
  • C++ Qt开发:TableWidget表格组件
  • layui框架实战案例(25):table组件筛选列记忆功能
  • 20、WEB攻防——PHP特性缺陷对比函数CTF考点CMS审计实例
  • 互换数组的两个轴 numpy.swapaxes()
  • 金蝶云星空修改业务对象标识
  • 【PHP入门】2.1-运算符
  • 【Hive】——DML
  • 【Spring教程31】SSM框架整合实战:从零开始学习SSM整合配置,如何编写Mybatis SpringMVC JDBC Spring配置类
  • Tailwind CSS 入门
  • 如何在简历中解释就业空白
  • 【计算机网络】TCP协议——2.连接管理(三次握手,四次挥手)
  • 螺丝厂家:如何根据您的需求找到合适您的紧固件
  • 企业数字化转型进入深海区:生成式AI时代下如何制定数据战略
  • html行内元素和块级元素的区别?
  • ResNet 原论文及原作者讲解
  • liteflow规则引擎 执行Groovy脚本
  • GZ015 机器人系统集成应用技术样题5-学生赛
  • Spark编程实验二:RDD编程初级实践
  • CleanMyMac X这一款mac电脑清理垃圾文件软件好用吗?
  • 四通道 DMOS 全桥驱动MS35631N/MS35631
  • JWT令牌的作用和生成
  • elementui el-pagination分页组件查询的时候当前页不更新
  • C++——C++11(1)
  • CoPilot究竟如何使用?
  • 前端(三)
  • Maven知识
  • 美颜SDK是什么?视频美颜SDK在直播平台中的集成与接入教程详解
  • CSS基础面试题
  • L1-028 判断素数