公司服务升级确定了新的架构,假如当前部门是二级部门,二级部门下的三级部门全部已选择,那么后端接口要求只需要传二级部门的id,并且操作符传参为 like;如果某一个部门已选择,切父级部门没有选择,那么就需要传参为具体子部门的id,操作符为 in

① 只要所选部门中包含一个或一个以上的父级部门(父级部门标识 isParent 为true),

传参:将属于该父级部门中的子级部门全部去除,并保留该父级部门

操作符: like

② 只要所选部门中不包含任何一个父级部门(父级部门标识 isParent 为true),

传参: 所有已选部门的id

操作符: in

这个之前我翻了好多的elementUI tree的文档,都没有找到合适的解决方案,上次看到了一个解决方法,但是对性能不是很好,所以我优化了一下

思路: 可以使用 getCheckedNodes() 获取到所有已选的数据(包括所有的父子部门),根据父部门的特点isParent === true 来去除所有的父级部门,并且树绑定的treePos,是有特殊规律的,根据当前树的层级来的

解决方案一:

let treeNodes = this.$refs.tree.getCheckedNodes()

let treeKeys = this.$refs.tree.getCheckedKeys()

this.checkPos = []

this.operatorType = this.scope.dataScope.operatorType || 'like'

let parentNodes = treeNodes.filter((item) => {

return item.isParent === true

})

if (parentNodes.length !== 0) {

let parentPos = parentNodes.map(it => {

return it.treePos

})

this.operatorType = 'like'

this.checkPos = treeKeys.filter(elem => {

let isBottom = parentPos.every((el) => {

return elem.includes(el) && elem !== el

})

if (!isBottom) {

return elem

}

})

} else {

this.operatorType = 'in'

this.checkPos = treeKeys

}

解决方案二:循环遍历树结构,找到上一级或者最后一级已选中的data

findParents(store) {

const checkedNodes = [];

const filterNodes = function(node) {

const treeNodes = node.root ? node.root.childNodes : node.childNodes;

treeNodes.forEach(child => {

if (child.checked) { // 已找到选中的上一级或者当前最后一级

checkedNodes.push(child);

}

if (child.indeterminate) { // 节点的子树中是否有被选中的节点

filterNodes(child);

}

});

};

filterNodes(store)

return checkedNodes;

}

findParents(this.$refs.tree.store) // 输出树数据

elementui获取所有树节点_element-ui tree获取子节点全选的父节点信息相关推荐

  1. tree父节点不被选中和勾选(所以父节点)只选择子节点

    tree父节点不被选中和勾选(所以父节点)只选择子节点 t = $.fn.zTree.init(t, setting, result); var zTree = $.fn.zTree.getZTree ...

  2. ztree 更新配置后重新渲染树_【问】zTree异步加载时添加父节点怎样避免再次加载整树...

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 具体情况是 每当我执行add方法添加父节点的时候,都回去server端重新获取一次树节点信息,并加载在新增加的节点下. 页面代码如下 var settin ...

  3. EasyUI:combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值

    在开发过程中遇到的小案例 效果展示 未处理之前的效果: 处理之后的效果: 需求详情 combotree(树形下拉框)复选框选中父节点时输入框只显示父节点的文本值,但是子节点的状态是选中的. 当所有子节 ...

  4. js、jquery操作复选框checkbox总结(单个/多个获取选中值、初始化设置默认选中值、全选反选)

    一.单个复选框 使用label标签可以点击文字就能选中复选框或者是取消选择复选框 label标签的两种使用方法:   https://blog.csdn.net/qq_40015157/article ...

  5. element tree ui 全选_element UI tree 控件,点击父节点进行异步加载,异步加载的数据不能全选...

    异步加载不能有多级数据,异步的只能一级级加载 贴上我的代码 html :load="loadNode" node-key='id' lazy ref="tree" ...

  6. elementui 上传七牛_element ui使用上传组件上传文件到七牛(qiniu-js)

    博主正在重构博客中,刚开始时静态资源都是上传到本地服务器的,但这个项目博主最后打算真正上线运营的.索性就改进了下,把静态资源尽量放到云存储中,方便后续开发.这里把方法和遇到坑给记录下. 1.使用前提注 ...

  7. elementui表格宽度适应内容_element ui 表格高度自适应

    首先给表格初始一个高度 tableHeight: (window.innerHeight || document.documentElement.clientHeight || document.bo ...

  8. element tree 父级勾选子级也勾选,子级勾选默认父级也勾选, 子级取消勾选不影响父级勾选(前端)

    在做菜单和菜单按钮权限配置这块,用element-UI中的tree组件来做.想选中单个页面,或者单个页面的某个具体按钮,就能把所有上级的父级菜单也勾选上,而且取消菜单按钮的时候还不影响父级菜单的勾选. ...

  9. element-ui 表格table,动态显示每一列的,重置全选

    先看效果图 html: html: 我是通过v-if="colData[0].istrue",通过勾选框的选中和不选中来控制对应列的istrue的true/false,从而控制每一 ...

最新文章

  1. 暑期集训1:C++STL 例2:UVA-10935
  2. java文件打包jar文件_Java打包成jar文件,以及将jar文件导出为exe文件方法汇总(图形说明)...
  3. CentOS安装和配置FTP
  4. [渝粤教育] 盐城工学院 环境监测与仪器分析 参考 资料
  5. [css] font-style的属性有Italic和oblique,两者有什么区别呢
  6. repeated_Ruby中带有示例的Array.repeated_combination()方法
  7. mysql导入xml 工具下载_XmlToOracle(XML导入Oracle工具)下载_XmlToOracle(XML导入Oracle工具) 版本: V2.0官方版_魅蓝下载...
  8. 什么是波导的简并波,矩形波导和圆波导中的简并有何异同
  9. openstack热添加磁盘
  10. Wireshark详细使用教程
  11. docke网络之bridge、host、none
  12. 最新勒索软件WannaCrypt病毒感染前清除处理及加固
  13. 纵说“同步”与“异步”
  14. c语言编程输出主析取范式,c++编程:从键盘上任意输入一个主析取范式,输出与之等值的主合取范式...
  15. REDO文件损坏修复
  16. java程序开启远程调试、断点功能
  17. [Matlab] 论文画图技巧:预测曲线图
  18. 服务器 最新 配置,常见的服务器配置参数介绍
  19. HMC833 写寄存器解析
  20. 交易猫 转转 闲鱼后台源码

热门文章

  1. (三)Neo4j自带northwind案例--Cypher语言应用
  2. 1051. 复数乘法 (15)
  3. (JAVA)FileWriter
  4. 2019最新Python爬虫高频率面试题总结(一)
  5. Linux系统添加永久静态路由的方法
  6. Python入门基础之迭代和列表生成式
  7. 《DSP using MATLAB》第6章开始了
  8. Python 爬虫抓取代理IP,并检测联通性
  9. Linux用户与“最小权限”原则
  10. OpenStack Weekly Rank 2015.08.24