element-ui Tree 树形控件 过滤保留子级并获取过滤后的数据

本示例基于vue2 + element-ui

element-ui 的官网demo是只保留到过滤值一级的，并不会保留其子级

目标

1、Tree 树形控件 保留过滤值的子级

2、在第一次过滤数据的基础上进行第二次过滤

先看效果

Tree 树形控件 保留过滤值的子级

// 对树节点进行筛选时执行的方法
filterNode (value, data, node) {
  let parentNode = node.parent; // 父级node
  let labels = [node.label]; // 当前node的名字
  let level = 1; // 层级
  while (level < node.level) {
    labels = [...labels, parentNode.label]; // 当前node名字，父级node的名字
    parentNode = parentNode.parent;
    level++;
  }
  return labels.some((d) => d.indexOf(value) !== -1);
},

在第一次过滤数据的基础上进行第二次过滤

1、下载插件库

npm install -S circular-json

2、在使用页面引入

import CircularJSON from 'circular-json'

3、代码应用