elementui获取所有树节点_element-ui tree获取子节点全选的父节点信息
公司服务升级确定了新的架构,假如当前部门是二级部门,二级部门下的三级部门全部已选择,那么后端接口要求只需要传二级部门的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获取子节点全选的父节点信息相关推荐
- tree父节点不被选中和勾选(所以父节点)只选择子节点
tree父节点不被选中和勾选(所以父节点)只选择子节点 t = $.fn.zTree.init(t, setting, result); var zTree = $.fn.zTree.getZTree ...
- ztree 更新配置后重新渲染树_【问】zTree异步加载时添加父节点怎样避免再次加载整树...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 具体情况是 每当我执行add方法添加父节点的时候,都回去server端重新获取一次树节点信息,并加载在新增加的节点下. 页面代码如下 var settin ...
- EasyUI:combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值
在开发过程中遇到的小案例 效果展示 未处理之前的效果: 处理之后的效果: 需求详情 combotree(树形下拉框)复选框选中父节点时输入框只显示父节点的文本值,但是子节点的状态是选中的. 当所有子节 ...
- js、jquery操作复选框checkbox总结(单个/多个获取选中值、初始化设置默认选中值、全选反选)
一.单个复选框 使用label标签可以点击文字就能选中复选框或者是取消选择复选框 label标签的两种使用方法: https://blog.csdn.net/qq_40015157/article ...
- element tree ui 全选_element UI tree 控件,点击父节点进行异步加载,异步加载的数据不能全选...
异步加载不能有多级数据,异步的只能一级级加载 贴上我的代码 html :load="loadNode" node-key='id' lazy ref="tree" ...
- elementui 上传七牛_element ui使用上传组件上传文件到七牛(qiniu-js)
博主正在重构博客中,刚开始时静态资源都是上传到本地服务器的,但这个项目博主最后打算真正上线运营的.索性就改进了下,把静态资源尽量放到云存储中,方便后续开发.这里把方法和遇到坑给记录下. 1.使用前提注 ...
- elementui表格宽度适应内容_element ui 表格高度自适应
首先给表格初始一个高度 tableHeight: (window.innerHeight || document.documentElement.clientHeight || document.bo ...
- element tree 父级勾选子级也勾选,子级勾选默认父级也勾选, 子级取消勾选不影响父级勾选(前端)
在做菜单和菜单按钮权限配置这块,用element-UI中的tree组件来做.想选中单个页面,或者单个页面的某个具体按钮,就能把所有上级的父级菜单也勾选上,而且取消菜单按钮的时候还不影响父级菜单的勾选. ...
- element-ui 表格table,动态显示每一列的,重置全选
先看效果图 html: html: 我是通过v-if="colData[0].istrue",通过勾选框的选中和不选中来控制对应列的istrue的true/false,从而控制每一 ...
最新文章
- 暑期集训1:C++STL 例2:UVA-10935
- java文件打包jar文件_Java打包成jar文件,以及将jar文件导出为exe文件方法汇总(图形说明)...
- CentOS安装和配置FTP
- [渝粤教育] 盐城工学院 环境监测与仪器分析 参考 资料
- [css] font-style的属性有Italic和oblique,两者有什么区别呢
- repeated_Ruby中带有示例的Array.repeated_combination()方法
- mysql导入xml 工具下载_XmlToOracle(XML导入Oracle工具)下载_XmlToOracle(XML导入Oracle工具) 版本: V2.0官方版_魅蓝下载...
- 什么是波导的简并波,矩形波导和圆波导中的简并有何异同
- openstack热添加磁盘
- Wireshark详细使用教程
- docke网络之bridge、host、none
- 最新勒索软件WannaCrypt病毒感染前清除处理及加固
- 纵说“同步”与“异步”
- c语言编程输出主析取范式,c++编程:从键盘上任意输入一个主析取范式,输出与之等值的主合取范式...
- REDO文件损坏修复
- java程序开启远程调试、断点功能
- [Matlab] 论文画图技巧:预测曲线图
- 服务器 最新 配置,常见的服务器配置参数介绍
- HMC833 写寄存器解析
- 交易猫 转转 闲鱼后台源码