解决el-tree树形组件,使用节点过滤功能,当过滤出的节点带有子节点时只展示父节点的问题

844 阅读1分钟

原始树形: image.png 在输入框中输入‘二级’进行过滤,结果如下图: image.png 二级 1-1节点下的子级并没有展示出来。

如果有需求需要将节点的子节点一并展示出来,可使用以下方法:

   <el-tree
      ref="tree"
      :data="treeData"
      node-key="code"
      :default-expanded-keys="expandedKeys"
      :props="replaceFields"
      :expand-on-click-node="false"
      :auto-expand-parent="true"
      :filter-node-method="filterNode"
      @node-expand="handleNodeExpand"
      @node-collapse="handleNodeCollapse"
      @node-click="handleNodeClick">
   </el-tree>
    
    filterNode(value, data, node) {
      if (!value) return true;
      // return data.name.indexOf(value) !== -1;
      let parentNode = node.parent;
      let labels = [node.data.name];
      let level = 1;
      while (level < node.level) {
        labels = [...labels, parentNode.data.name];
        parentNode = parentNode.parent;
        level++;
      }
      return labels.some((label) => label.indexOf(value) !== -1);
    },