摘月亮的小船儿

切换模式

解决el-tree树形控件搜索过滤父节点，不展示子节点问题 ​

问题描述 ​

在使用el-tree树形控件时，如果设置了filterable属性，并且设置了filter-node-method方法，那么在搜索时，父节点会展示，但是子节点不会展示。

解决方案 ​

js
function filterNode(value: string, data: any, node: any) {
  if (!value) return true;
  let parentNode = node.parent;
  let labels = [node.label];
  let level = 1;
  while (level < node.level) {
    labels = [...labels, parentNode.label];
    parentNode = parentNode.parent;
    level++;
  }
  return labels.some((label) => label.indexOf(value) !== -1);
}
function filterNode(value: string, data: any, node: any) {
  if (!value) return true;
  let parentNode = node.parent;
  let labels = [node.label];
  let level = 1;
  while (level < node.level) {
    labels = [...labels, parentNode.label];
    parentNode = parentNode.parent;
    level++;
  }
  return labels.some((label) => label.indexOf(value) !== -1);
}

代码说明 ​

  1. 首先，判断传入的value是否为空，如果为空，则返回true，表示所有节点都展示。
  2. 如果value不为空，则获取当前节点的父节点，并将当前节点的label添加到一个数组中。
  3. 然后，通过循环，获取当前节点的所有父节点的label，并将它们添加到数组中。
  4. 最后，通过some方法，判断数组中是否有任何一个label包含传入的value，如果有，则返回true，表示该节点展示，否则返回false，表示该节点不展示。

总结 ​

通过以上方法，可以解决el-tree树形控件搜索过滤父节点，不展示子节点的问题。