解决element ui中的el-tree组件default-checked-keys默认勾选节点问题

news/2024/7/10 0:34:16 标签: vue

解决element ui中的el-tree组件default-checked-keys默认勾选节点问题

  • 需求
    • 解决方法
      • 方法1
      • 方法2

需求

选中子节点的时候,父节点必须被选中,但是仅展示被选中父节点和子节点

解决方法

方法1

html部分代码:

 <el-tree
     class="filter-tree"
     node-key="enCode"
     :data="areaTree"
     :props="defaultProps"
     :default-checked-keys="defaultChecked"
     :expand-on-click-node="false"
     show-checkbox
     default-expand-all
     ref="areaTrees">
</el-tree>

当需要动态改变树形结构的默认勾选值(例如每条数据都需要调接口查询,根据查询结果渲染树的选中情况)时,只修改defaultChecked的时,值的改变没有渲染相应的树节点,需要通过调用setCheckedKeys方法来改变选中状态:

js代码:

this.$nextTick(() => {
     this.$refs.areaTrees.setCheckedKeys(this.defaultChecked);
})

方法2

结合tree的ref属性

<el-tree
  :data="data"
  show-checkbox
  node-key="id"
  ref="tree"
  :props="defaultProps">
</el-tree>

js代码:

this.$refs.tree.getCheckedNodes(false, true);

通过getCheckedNodes获取所有选中节点

编辑处理

<el-tree
  :data="data"
  show-checkbox
  node-key="id"
  ref="tree"
  :default-checked-keys="defaultKeys"
  :check-strictly="true"
  :props="defaultProps">
</el-tree>

最初准备使用default-checked-keys属性,但是并非预期的效果,因为如果defaultKeys包含父节点,那么它所属的子节点都会被选中,即使你新增的时候没有选中其中的某个子节点。
找了找属性,看到了check-strictly,其描述为"在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false",试了一下,展示效果没有问题,但是选中子类的时候,父类不会被选中,选中父类的时候,子类也不会被勾选,等于完全不在关联,也不是想要的效果。

最终处理

 this.$refs.tree.setChecked(key/data, checked, deep);

已选中的key循环使用setChecked处理,具体参数描述如下

(key/data, checked, deep) 接收三个参数,1. 勾选节点的 key 或者 data 2. boolean 类型,节点是否选中 3. boolean 类型,是否设置子节点 ,默认为 false

其中有用的是第三个参数,不再对子节点进行设置,这样即保持了新增时候的选中效果,又可以点击父节点对子节点进行全部选中或者全部取消的效果。


http://www.niftyadmin.cn/n/5456703.html

相关文章

【React】React AJAX

在React中使用AJAX&#xff08;Asynchronous JavaScript and XML&#xff09;是一种常见的做法&#xff0c;用于从服务器获取数据并在组件中显示。尽管AJAX的名字中包含了XML&#xff0c;但现在更多地使用JSON&#xff08;JavaScript Object Notation&#xff09;作为数据交换格…

构建一个基础的大型语言模型(LLM)应用程序

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

设计模式系列之--观察者模式-画图讲解

观察者模式已经是比较常见的设计模式了&#xff0c;并且使用的频率也比较高, 那么我们什么时候用&#xff0c;简而言之就是&#xff0c;当我们一个主体改变&#xff0c;它所有下级要跟着改变的时候就需要用了&#xff0c;比如&#xff1a;换肤&#xff0c;全局数据修改&#x…

标定系列——基于OpenCV实现普通相机、鱼眼相机不同标定板下的标定(五)

标定系列——基于OpenCV实现相机标定&#xff08;五&#xff09; 说明代码解析VID5.xmlin_VID5.xmlcamera_calibration.cpp 说明 该程序可以实现多种标定板的相机标定工作 代码解析 VID5.xml <?xml version"1.0"?><!-- 相机拍摄的标定板图像路径名 --…

docker 安装Sentinel

1.拉取镜像&#xff1a;docker pull bladex/sentinel-dashboard 2.运行镜像&#xff1a;docker run --name sentinel -d -p 8858:8858 -d bladex/sentinel-dashboard 3. 访问地址&#xff1a; 本地地址&#xff1a;http://localhost:8858 (默认端口为8080) 远程地址&#xf…

scala-idea环境搭建及使用

环境搭建 创建一个新项目&#xff0c;选择maven工程 点击next&#xff0c;写入项目名&#xff0c;然后finish 注意&#xff1a;默认下&#xff0c;maven不支持scala的开发&#xff0c;需要引入scala框架&#xff0c;右键项目点击-》add framework pport....&#xff0c;在下图…

使用倒模耳机壳UV树脂胶液制作HIFI耳机隔音降噪耳机壳有哪些优点?

使用倒模耳机壳UV树脂胶液制作HIFI耳机隔音降噪耳机壳有以下优点&#xff1a; 高音质表现&#xff1a;通过优化设计和工艺&#xff0c;可以有效提高耳机的音质表现。倒模工艺可以更好地贴合耳机驱动单元&#xff0c;减少声音散射和反射&#xff0c;提高声音的清晰度和质感。隔…

基于SpringCloud+Hadoop+Vue实现的企业级网盘系统实现

编程语言&#xff1a;Java、Mybatis、Spring、SpringBoot、SpringCloud、Node、Vue 开发环境&#xff1a;Windows 10 Mysql 开发工具&#xff1a;WebStorm、IDEA编译器、Git、Maven 应用部署服务器&#xff1a;SpringBoot内置Tomcat插件 Node服务器&#xff1a;Node v10.1…