搜索匹配高亮

# 搜索匹配高亮

# 📖. 前言

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

element_02-21_01

左侧是：搜索命中结果高亮

右侧是：命中的关键词高亮

# 一. 实现

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

# 1. 命中的结果高亮

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

<template>
  <!-- 匹配结果高亮 -->
  <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>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

关键点：

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

说明	类型
对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏	Function(value, data, node)

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

<script>
  export default {
    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' }
            ]
          },
        ]
      }
    },
    
    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
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

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

第三：样式

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

1
2
3
4
5
6
7
8
9

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

# 2. 命中的关键词高亮

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

<template>
  <!-- 匹配关键字高亮 -->
  <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>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

关键点：

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

使用正则将filterText1 替换为

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

#Element

上次更新: 2023/02/21, 16:03:08

← 限制输入方案