vue3.x搭配el-tree的自定义内容+搜索值为高亮问题

在日常搬砖中需要对el-tree进行自定义内容的改变，el官方有关于自定义的设置，我简单的说一下：

                  <el-tree
                      class="filter-tree"
                      :data="treeList"
                      :props="defaultProps"
                      :expand-on-click-node="false"
                      :default-expand-all="false"
                      ref="forTree"
                      :filter-node-method="filterNode"
                  >
                    <template #default="{ data }">
                      <span v-html="ruleText(data.name,input)"></span>
                    </template>
                  </el-tree>

#default="{ data }只要一个data即可，里面是这一级的数据。

ruleText是追加高亮，传入的是name和搜索的值

const ruleTitle = (data:string,input:string) =>{
      let text = data;
      let c = new RegExp(input, 'i')
      let cdom = `<span style="background-color: red">${text.match(c)}</span>`
      return text.replace(c, cdom)
};

这里需要使用js的RegExp对象

 传入的第一个是匹配的val，第二个自选（i，g，m），我这里需要匹配的val不论大小写都能匹配到，所以选择了“i”。text.match(c)返回匹配到的值，不论大小写。最后使用replace方法进行替换。

replace参数：