vue3项目中使用css自定义高亮API实现Ag-grid搜索内容高亮

<template>
  <ag-grid-vue
    style="width: 500px; height: 500px;"
    class="ag-theme-alpine"
    :columnDefs="columnDefs"
    :rowData="rowData"
    @grid-ready="onGridReady"
  ></ag-grid-vue>
</template>
 
<script>
import { AgGridVue } from 'ag-grid-vue';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
 
export default {
  components: {
    AgGridVue
  },
  data() {
    return {
      columnDefs: [
        { headerName: 'Make', field: 'make' },
        { headerName: 'Model', field: 'model' },
        { headerName: 'Price', field: 'price' }
      ],
      rowData: [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxter', price: 72000 }
      ],
      gridApi: null,
      gridColumnApi: null
    };
  },
  methods: {
    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;
 
      const createHighlightedHeader = (params) => {
        const renderer = params.renderer;
        const eCell = document.createElement('div');
        eCell.innerHTML = params.value;
 
        const highlightAll = (nodeList, cssClass) => {
          nodeList.forEach(node => {
            node.classList.add(cssClass);
          });
        };
 
        const searchTerm = 'porsche'; // 搜索词，可以从外部输入
        const searchWords = searchTerm.toLowerCase().split(' ');
        const textNodes = eCell.querySelectorAll('[class^="ag-header-cell-text"]');
 
        const highlightText = (textNode, searchWords) => {
          const nodeText = textNode.textContent.toLowerCase();
          let newNodeText = nodeText;
          let offsetAdjustment = 0;
          searchWords.forEach(word => {
            const wordOffset = nodeText.indexOf(word);
            if (wordOffset > -1) {
              const startNode = textNode.splitText(wordOffset);
              const endNode = startNode.splitText(word.length);
              const highlightNode = document.createElement('span');
              highlightNode.classList.add('highlighted-text');
              highlightNode.textContent = startNode.textContent;
              newNodeText = newNodeText.replace(word, '');
              startNode.parentNode.insertBefore(highlightNode, startNode);
              star