Element el-tree 组件搜索高亮

问题

如题

解决

  <el-tree
    ref="tree"
    :data="vehicleGroupsTreeData"
    node-key="id"
    default-expand-all
    :expand-on-click-node="false"
    :filter-node-method="filterTreeNode"
  >
    >
    <span slot-scope="{ node, data }" class="custom-tree-node">
      <span v-if="!searchInput">{{ data.label }}</span>
      <span v-if="searchInput" v-html="data.label.replace(new RegExp(searchInput,'g'),`<mark>${searchInput}</mark>`)" />
    </span>
  </el-tree>

filterTreeNode (value, data) {
  if (!value) return true
  return data.label.indexOf(value) !== -1
}

关键点在 v-html="data.label.replace(new RegExp(searchInput,'g'),${searchInput})"

参考文章

https://blog.csdn.net/qq_40247562/article/details/102399298