vue实战中的一些技巧《一》

大部分公司几乎现在都用到了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来去渲染了

这样就达到我们需求了，可以明确标出我们查询的那个名字