element 搜索后高亮显示

要实现搜索后高亮显示元素，可以使用以下代码：

在getList()查询事件中添加以下代码：

// 获取搜索框和表格元素
const searchInput = this.queryParams.name;
const table = document.querySelector('#data-table');

// 监听搜索框输入事件
searchInput.addEventListener('input', () => {
  // 获取搜索关键字
  const keyword = searchInput.value.trim().toLowerCase();

  // 如果搜索关键字为空，移除所有高亮样式
  if (!keyword) {
    table.querySelectorAll('.highlight').forEach(el => {
      el.classList.remove('highlight');
    });
    return;
  }

  // 遍历表格中的每个单元格
  table.querySelectorAll('td').forEach(td => {
    // 获取单元格文本内容
    const cellText = td.textContent.trim().toLowerCase();

    // 如果单元格内容包含搜索关键字，添加高亮样式
    if (cellText.includes(keyword)) {
      // 将匹配到的关键字替换为带有高亮样式的文本
      const highlightedText = cellText.replace(new RegExp(keyword, 'gi'), match => `<span class="highlight">${match}</span>`);
      td.innerHTML = highlightedText;
    } else {
      // 移除高亮样式
      td.innerHTML = cellText;
    }
  });
});

这段代码会监听搜索框的输入事件，获取搜索关键字，并遍历表格中的每个单元格。如果单元格内容包含搜索关键字，会将匹配到的关键字替换为带有高亮样式的文本，否则移除高亮样式。这样就可以实现搜索后高亮显示元素。\[1\]
#### 引用[.reference_title]
- *1* [vue 若依 element 搜索框搜索出来的关键字 高亮处理](https://blog.csdn.net/qq_43770056/article/details/130168275)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [通过RegExp实现 element UI tree 高亮显示(样式改变)搜索框过滤内容](https://blog.csdn.net/m0_62021563/article/details/125478009)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]