vue 在模板中高亮部分文字

m0_62651421

已于 2024-07-19 16:28:29 修改

阅读量220

点赞数 3

文章标签： vue.js javascript 前端

于 2024-07-15 09:51:11 首次发布

本文链接：https://blog.csdn.net/m0_62651421/article/details/140429999

版权

1.需求：

table列的数据根据表单搜索的值，进行高亮显示；

- 搜索

- 对应文字高亮；

2.方案：

第一种（代码处理通过split + 正则转换成数组后进行遍历；）

ui组件用的是 antd-vue

<template #fullFindContent="{row}">
        <a-tooltip color="#fff" destroyTooltipOnHide placement="topLeft">
          <template #title>
            <template
                    v-for="(fragment, i) in row.fullFindContent
                      .toString()
                      .split(new RegExp(`(?<=${fullFindContentValue})|(?=${fullFindContentValue})`, 'i'))"
                  >
                    <span
                      v-if="fragment.toLowerCase() === fullFindContentValue?.toLowerCase()"
                      :key="i"
                      style="color: rgb(255, 85, 0)"
                    >
                      {{ fragment }}
                    </span>
                    <span v-else style="color:#080808">{{ fragment }}</span>
                  </template>
          </template>
          {{ row.fullFindContent }}
        </a-tooltip>
</template>

第二种（直接通过正则筛选后生成字符串通过v-html插入）推荐

<template #fullFindContent="{row}">

        <a-tooltip color="#fff" destroyTooltipOnHide placement="topLeft">

          <template #title>

            <span style="color:#080808"><span v-html="getFragment(row.fullFindContent)"></span></span>

          </template>

        <span v-html="getFragment(row.fullFindContentShort)"></span>

        </a-tooltip>

      </template>

const getFragment = (test) =>{
    let reg = new RegExp(fullFindContentValue.value, 'g')
     const val = test?.replace(reg, (key) => {
        return `<span style="color: rgb(255, 85, 0)">${key}</span>`
    })
    return val
  }