vue element 使用js筛选tree这种结构的数据

一,筛选连带父级

nodes为传入数据

query为检索键字er

filterTree(nodes, query) {
 	// 条件就是节点的title过滤关键字
 	let predicate = function(node) {
 		if (node.name.includes(query) || node.name.includes(query)) {
 			return true;
 		} else {
 			return false;
 		}
 	};
 	// 结束递归的条件
 	if (!(nodes && nodes.length)) {
 		return [];
 	}
 	let newChildren = [];
 	for (let node of nodes) {
 		let subs = this.filterTree(node.children, query);
 		if (predicate(node)) {
 		  newChildren.push(node);
 		} else if (subs && subs.length) {
 		  node.children = subs;
 		  newChildren.push(node);
 		}
 	}
 	return newChildren.length ? newChildren : [];
 }

二,不带父级

 filterTree(nodes, query) {
          // 条件就是节点的title过滤关键字
          let predicate = function (node) {
            if (node.name.includes(query) || node.name.includes(query)) {
              return true;
            } else {
              return false;
            }
          };

          // 结束递归的条件
          if (!(nodes && nodes.length)) {
            return [];
          }
          let newChildren = [];
          for (let node of nodes) {

            //不带父节点   
            if (predicate(node)) {
              newChildren.push(node);
              node.children = this.filterTree(node.children, query);
            } else {
              newChildren.push(...this.filterTree(node.children, query));
            }
          }
          return newChildren.length ? newChildren : [];
        }

改方法可以用做筛选树,树表等场景使用!

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于 Vue Element UI 中的 Tree 组件,也可以使用懒加载的方式来查询所有数据。具体实现方法如下: 1. 在 Tree 组件中设置 `lazy` 属性为 `true`,表示开启懒加载模式。 2. 在 Tree 组件中设置 `load` 属性,用于指定懒加载时需要调用的方法。 3. 在 `load` 方法中使用异步请求获取数据,并将数据通过回调函数返回给 Tree 组件。 下面是一个示例代码,演示如何使用懒加载的方式查询 Vue Element UI 中的 Tree 组件中的所有数据: ```vue <template> <el-tree :data="treeData" :lazy="true" :load="lazyLoad"></el-tree> </template> <script> export default { data() { return { treeData: [], // 懒加载时需要调用的方法 lazyLoad(node, resolve) { // 模拟异步请求数据 setTimeout(() => { // 获取数据 const data = getData(node.id); // 将数据通过回调函数返回给 Tree 组件 resolve(data); }, 1000); } } } } </script> ``` 在这个示例中,我们在 Tree 组件中设置了 `lazy` 属性为 `true`,表示开启懒加载模式。然后在 `load` 方法中,模拟异步请求数据,并将数据通过回调函数 `resolve` 返回给 Tree 组件。最后,我们在 Tree 组件中使用 `treeData` 属性来显示查询到的数据。 需要注意的是,在实际使用中,需要根据实际情况修改 `getData` 方法来获取对应的数据。同时,在 `lazyLoad` 方法中,也可以根据需要进行数据处理,以便在 Tree 组件中正确显示数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值