vue 搜索关键字高亮

 

1 封装关键字高亮

//str 要传入的字符串  key 代表要高亮的字符串
export const heightLight = (str, key) => {
	const reg = new RegExp(key, 'ig')
	return str.replaceAll(reg, (val) => {
		return `<span style="color:#DE4332 !important;">${val}</span>`
	})
}

2 使用

import { heightLight } from "@/libs/util";



  methods: {
    getSearch() {
      getData({
        url: "/customer/duplicate",
        data: {
          search_word: this.search_word,
        },
      }).then((res) => {
        const {
          code,
          data: { list },
        } = res;
        if (code === 200) {
         var f_list = list.data ;//接口返回的数据  
            // 统一处理
         f_list.map(item => {
           return item.company = heightLight(item.company, this.search_word);
          })
      //  赋值
          this.tableData = f_list;
        }
      });
    },
}

3 页面显示

          <el-table :data="tableData" style="width: 100%" :header-row-style="{ color: '#464C5B', 'font-size': '14px' }"
            :cell-style="{ color: '#203360', 'font-size': '14px' }" height="400px">
            <el-table-column prop="company" label="客户名称" width="180">
              <template slot-scope="scope">
                <div v-html="scope.row.company">
                </div>
              </template>
            </el-table-column>
 </el-table>