element-ui中tree组件如何实现搜索高亮效果？

Question

网上的这个，都是写死了3级菜单，如果有不固定的多级菜单怎么写呢？
https://my.oschina.net/yxmBet...

补充一下，是搜索不是过滤，效果是展开节点，高亮关键字。

Answer 1

没实际跑代码，根据你的疑问：多层级的树怎么过滤，写了下伪代码：

function(value, data, node) {
    if (!value) return true;

    let flag = data.label.indexOf(value) > -1;
    let parent = node.parent;

    while (parent && !flag) {
        flag = parent?.data?.label?.indexOf(value) > -1;
        parent = parent?.parent;
    }
    return flag;
}

Answer 2

自定义el-tree的节点，发一个我的用法的伪代码，这个只是高亮，我觉得还是得配合自带的筛选用，不然还得自己递归去展开数据源没必要。

<el-tree
  ref="departmentTreeRef"
  class="mt-4"
  filterable
  :props="treeProps"
  :data="departmentTree"
  :filter-node-method="filterNode"
  @node-click="handleDepartmentSelect"
>
  <template #default="{ node }">
    <span
      class="el-tree-node__label overflow-hidden overflow-ellipsis"
      :title="node.label">
      <span v-html="formatDepartmentName(node.label)"></span>
    </span>
  </template>
</el-tree>

const formatDepartmentName = (departmentName: string) => {
  if (departmentFilterText.value.trim()) {
    return departmentName.replaceAll(departmentFilterText.value.trim(), `<span style="background: #ffff48;">${departmentFilterText.value.trim()}</span>`)
  } else {
    return departmentName
  }
}

Answer 3

https://blog.csdn.net/m0_3768...