vue搜索框内容与列表内容匹配

vue搜索框内容与列表内容匹配

效果图

<el-table-column align="center" label="标题" min-width="250">
    <template slot-scope="{ row }">
        <div v-html="margins(row.title)"></div>
     </template>      
</el-table-column>
<script>
import { matchData } from '@/utils/common'
data(){
  return{
    title:'',//搜索框的title（公司名称）
  }
}，
methods:{
  margins(data) {
      return matchData(data, this.title)
    },
}
</script>

common.js

// 给匹配到的文字更换颜色
export const matchData = (data, text) => {
  console.log('data', data)
  console.log('text', text)
  let box = new RegExp(text, 'igm')
  return data.replace(box, `<span style="color:#19AD19">${text}</span>`)
}