el-tree 搜索匹配结果高亮、关键字高亮

1、背景

最近项目中用到了el-tree组件，根据产品的需求，需要做el-tree的关键词过滤功能，并且需要命中的关键字高亮显示，在这里记录一下实现的过程。

话不多说，先上效果图：

 左侧是搜索命中结果高亮，右侧是命中的关键词高亮。

2、实现

看了上面的效果图，下面针对上面的两种情况分别进行实现。

2.1、命中的结果高亮

命中的结果高亮如上的效果图左侧部分，具体的实现代码如下：

1）结构代码

    <!-- 匹配结果高亮 -->
    <div class="content-item">
    <el-input
    style="width:200px" 
    v-model="filterText"
    placeholder="搜索"
    prefix-icon="el-icon-search"
    clearable>
    </el-input>
    <el-tree 
        style="width:200px" 
        ref="tree"
        node-key="gid"
        :data="userDatas"
        :filter-node-method="filterNode"
        :default-expand-all="true">
        <span class="custom-tree-node" slot-scope="{ node }">
            <span :class="node.text">{{node.label}}</span>
        </span>
    </el-tree>
    </div>

主要就包括了一个 el-input 和 el-tree 组件

 关键点：

第一、使用了 el-tree 组件自带的 filter-node-method 属性，描述如下：

对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏

Function(value, data, node)

官网地址：Element - The world's most popular Vue UI framework

第二、使用了 slot-scope 自定义树节点的内容，参数为 { node, data }

2）js代码

watch:{
    filterText(value){
        this.$refs.tree.filter(value)
},

 methods: {
    filterNode(value, data, node){
        node.text = "";
        if(!value) return true;
        if(data.label.indexOf(value) !== -1){
            node.text = "red"
        }
        return data.label.indexOf(value) !== -1
    }
},

  data() {
    return {
        filterText:"",
        filterText1:"",
        userDatas:[
            
{gid:'0001',label:'测试01',children:[{gid:'00012',label:'测试0112'},           {gid:'00013',label:'测试0113'}]},
            
{gid:'0002',label:'测试02',children:[{gid:'00021',label:'测试0221'},{gid:'00022',label:'测试0222'}]},
            
{gid:'0003',label:'测试03',children:[{gid:'00031',label:'测试0331'},{gid:'00332',label:'测试0333'}]},
        ],
    }
  },

关键点：在 filterNode 方法中对 node节点中的text进行赋值，当命中后设置它的样式为红色

3）样式代码

.content-item{
    width: 300px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.red{
    color: red;
}

到这里命中结果高亮已经完成。

2.2、命中的关键词高亮

命中的结果高亮如上的效果图右侧部分，具体的实现代码如下：

1）结构代码

<!-- 匹配关键字高亮 -->
    <div class="content-item">
    <el-input
    style="width:200px" 
    v-model="filterText1"
    placeholder="搜索"
    prefix-icon="el-icon-search"
    clearable>
    </el-input>
    <el-tree 
        style="width:200px" 
        ref="tree1"
        node-key="gid"
        :data="userDatas"
        highlight-current
        :filter-node-method="filterNode1"
        :default-expand-all="true">
        <span slot-scope="{ node }" class="custom-tree-node">
            <span v-if="!filterText1">{{ node.label }}</span>
            <span v-if="filterText1" v-html="node.label.replace(new RegExp(filterText1,'g'),`<font style='color:red'>${filterText1}</font>`)" />
        </span>
    </el-tree>
    </div>

关键点：

v-html="node.label.replace(new RegExp(filterText1,'g'),`<font style='color:red'>${filterText1}</font>`)"

使用正则将filterText1 替换为 

<font style='color:red'>${filterText1}</font>

2）js代码

watch:{
    filterText1(value){
        this.$refs.tree1.filter(value)
    }
  },
  methods: {
    filterNode1(value, data, node){
        if(!value) return true;
        return data.label.indexOf(value) !== -1
    },
  },

样式代码同上，到这里命中关键字高亮就可以了。