大部分公司几乎现在都用到了vue，一个简易，灵活，高效的一个框架，方便快速开发项目。
- 在工作中，我们经常会遇到查询一条数据，但是我们如果模糊查询的时候，在查询的数据中，怎么高亮的显示我们查询的内容。
从后台遍历的数据中
this.listQuery就是我们在data定义的字段名，用户input绑定model，listBook请求的数据，这里是对title和author两个字段查询
listBook(this.listQuery).then(response => {
const list = response.data.list
this.list = list
this.listLoading = false
// 遍历数据,查询title和author
this.list.forEach(book => {
book.titleWrapper = this.wrapperKeyword('title', book.title)
book.authorWrapper = this.wrapperKeyword('author', book.author)
})
})定义一个wrapperKeyword方法
其中k和v就是我们模糊查询的字段名称，highlight返回查询到字段需要渲染的标志。
其中if条件判断是不是包含这个字段，如果有的话，通过正则直接返回，在正则中，已经i过滤大小写,g全局匹配
wrapperKeyword (k, v) {
function highlight (value) {
return `<span style="color:#1890ff">${value}</span>`
}
if (!this.listQuery[k]) {
return v
} else {
// 正则表达式 i大小写g全局
return v.replace(new RegExp(this.listQuery[k], 'ig'), v => highlight(v))
}
},在标签中，通过定义titleWrapper和authorWrapper动态绑定上去
<el-table-column label="ID"
prop="id"
sortable="custom"
align="center"
width="80" />
<el-table-column label="书名"
width="150"
align="center">
<template slot-scope="{row:{titleWrapper}}">
<span >{{titleWrapper}}</span>
</template>
</el-table-column>
<el-table-column label="作者"
width="150"
align="center">
<template slot-scope="{row:{authorWrapper}}">
<span >{{authorWrapper}}</span>
</template>
</el-table-column>这样写的话，在页面中会出现一个问题
渲染的时候，会出现一个问题，就是把标签也渲染上去了，这个时候，就需要vue提供的v-html来去渲染了
这样就达到我们需求了，可以明确标出我们查询的那个名字
