开发需求总结9-el-tree获取选中节点,节点全选时返回被全选子级的父节点,未全选则返回被选中的节点

目录

需求描述

代码实现:


需求描述

需要获取树组件选中的节点,假如父节点被选中(该节点全选),即只返回父节点的数据,如父节点未被全选,则正常返回被选中节点的数据。

示例一:

如上图,一级2和下面的子节点都选中了,此时需要只获取到一级 2 这个节点的数据即可

示例二:

如上图,此时,除了二级 2-1 节点外,其余节点被选中,此时只需要获二级 2-2 、一级3 这两个节点的数据即可。

代码实现:

利用递归的方法,遍历所有的节点,判断其是否为全选状态,为全选状态时即拿到其数据

说简单点就是需要实现3中情况:

1、如果选中父节点,子节点也全部选中,则只返回父节点的数据

2、如果选中父节点,子节点未被选中选中,则返回所有被选中的子节点数据

3、如果只选中了子节点,则指返回被选中的子节点数据

javascript 复制代码
getSimpleCheckedNodeIds (originData) {
  // 定义数组
  const checkedNodeIds = []
  // 判断是否为全选,若为全选状态返回被选中的父节点数据,不为全选状态正常返回被选中的子节点的数据
     const isAllChecked = function (node) {
     const childNodes = node.root ? node.root.childNodes : node.childNodes
     childNodes.forEach(child => {
        if (child.checked) {
          checkedNodeIds.push(child.data)
        }
        if (child.indeterminate) {
          isAllChecked(child)
        }
      })
    }
    isAllChecked(originData)
    return checkedNodeIds
  }

调用方法:

这里需要把树组件实例上的store传入

复制代码
let data = this.getSimpleCheckedNodeIds(this.$refs.tree.store)
相关推荐
程序员爱钓鱼1 小时前
Python 编程实战 · 实用工具与库 — Flask 路由与模板
前端·后端·python
JIngJaneIL1 小时前
旅游|内蒙古景点旅游|基于Springboot+Vue的内蒙古景点旅游管理系统设计与实现(源码+数据库+文档)
java·vue.js·spring boot·论文·旅游·毕设·内蒙古景点旅游
麦麦大数据3 小时前
D038 vue+django西游记问答知识图谱可视化系统
vue.js·django·问答系统·知识图谱·neo4j·可视化·可是还
合作小小程序员小小店4 小时前
web开发,在线%超市销售%管理系统,基于idea,html,jsp,java,ssh,sql server数据库。
java·前端·sqlserver·ssh·intellij-idea
不爱学英文的码字机器5 小时前
重塑 Web 性能:用 Rust 与 WASM 构建“零开销”图像处理器
前端·rust·wasm
浩星5 小时前
react的框架UmiJs(五米)
前端·javascript·react.js
子醉7 小时前
推荐一种适合前端开发使用的解决本地跨域问题的办法
前端
Niyy_7 小时前
前端一个工程构建多个项目,记录一次工程搭建
前端·javascript
xiangxiongfly9158 小时前
CSS link标签
前端·css
快乐非自愿9 小时前
常用设计模式:工厂方法模式
javascript·设计模式·工厂方法模式