# 搜索关键词高亮
# template
<el-table-column label="书名" width="150" align="center">
<template slot-scope="{ row: { titleWrapper }}">
<span v-html="titleWrapper" />
</template>
</el-table-column>
<el-table-column label="作者" width="150" align="center">
<template slot-scope="{ row: { authorWrapper }}">
<span v-html="authorWrapper" />
</template>
</el-table-column>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# js:
# 关键词高亮方法
export default {
data() {
return {
listQuery: {
PageIndex: 1,
PageSize: 10,
},
};
},
methods: {
wrapperKeyword(k, v) {
function highlight(value) {
return '<span style="color: #1890ff">' + value + "</span>";
}
if (!this.listQuery[k]) {
return v;
} else {
return v.replace(new RegExp(this.listQuery[k], "ig"), (v) =>
highlight(v)
);
}
},
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 查询接口
getList() {
this.listLoading = true
listBook(this.listQuery).then(response => {
const {
data,
total
} = response
this.list = data
this.total = total
this.listLoading = false
// 搜索词高亮调用
this.list.forEach(book => {
book.titleWrapper = this.wrapperKeyword('title', book.title)
book.authorWrapper = this.wrapperKeyword('author', book.author)
})
})
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18