搜索匹配高亮
# 搜索匹配高亮
# 📖. 前言
在日常的项目开发中,用到了 el-tree
组件,根据产品的需求,需要做 el-tree
的关键词过滤功能,并且需要命中的关键字高亮显示,在这里记录一下实现的过程。
左侧是:搜索命中结果高亮
右侧是:命中的关键词高亮
# 一. 实现
看了上面的效果图,下面针对上面的两种情况分别进行实现。
# 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
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
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
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
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>`)"
1
使用正则将filterText1 替换为
<font style='color:red'>${filterText1}</font>
1
<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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
样式代码同上,到这里命中关键字高亮就可以了。
上次更新: 2023/02/21, 16:03:08