使用element-ui tree获取子节点全选的父节点的信息

使用el-tree来展示机构信息,然后传给后台用来作为查询条件。最初版本是把所有选中的节点都传给后端,后端使用in的方式来查询数据。这就出现一个问题,如果选中的是根节点,就会把整棵树的数据都传给后端,sql执行性能差。

后端提出要求,如果子节点都选中了,就不要传子节点了,只要把父节点的信息传出去。翻烂了element-ui文档,也没找到现成的方法。只能自己写了,具体代码如下(参考了element-ui tree的源码)

getSimpleCheckedNodes(store) {
	const checkedNodes = [];
	const traverse = function(node) {
		const childNodes = node.root ? node.root.childNodes : node.childNodes;
	
		childNodes.forEach(child => {
			if (child.checked) {
				checkedNodes.push(child.data);
			}
			if (child.indeterminate) {
				traverse(child);
			}
		});
	};
	traverse(store)
	return checkedNodes;
}

....
// 调用
getSimpleCheckedNodes(this.$refs.tree.store);// el-tree的ref是tree

希望能帮助到需要的朋友,有用请点赞,嘻嘻:)

  • 25
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 21
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 21
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值