<el-form-item label="搜索內(nèi)容：">
  <el-input v-model="searchForm.searchContent" placeholder="請(qǐng)輸入搜索內(nèi)容"></el-input>
</el-form-item>
<div class="table-container">
  <el-table :data="visibleTableData" border style="width: 99%;" max-height="650px"
    :tree-props="{ children: 'details' }" row-key="id" @selection-change="handleSelectionChange">
    <!-- 表格列定義... -->
    <el-table-column align="center" label="資料內(nèi)容" prop="content">
      <template #default="scope">
        <span v-html="highlightText(scope.row.content, searchKeyword)"></span>
      </template>
    </el-table-column>
    <!-- 其他需要高亮的列... -->
  </el-table>
</div>

methods: {
  // 關(guān)鍵字高亮處理方法
  highlightText(text, keyword) {
    // 處理空值或非字符串類型
    if (!text || typeof text !== 'string') return text;
    if (!keyword || typeof keyword !== 'string') return text;
    // 轉(zhuǎn)義正則表達(dá)式特殊字符
    const escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    // 創(chuàng)建不區(qū)分大小寫(xiě)的全局匹配正則
    const regex = new RegExp(escapedKeyword, 'gi');
    // 使用span包裹匹配內(nèi)容并添加高亮樣式
    return text.replace(regex, (match) => {
      return `<span class="highlight">${match}</span>`;
    });
  },
  // 搜索事件處理
  handleSearch() {
    // 獲取搜索關(guān)鍵字
    this.searchKeyword = this.searchForm.searchContent.trim();
    // 執(zhí)行搜索過(guò)濾（此處需根據(jù)實(shí)際數(shù)據(jù)結(jié)構(gòu)實(shí)現(xiàn)）
    this.filterTableData();
  },
  // 表格數(shù)據(jù)過(guò)濾方法
  filterTableData() {
    if (!this.searchKeyword) {
      // 清空搜索時(shí)顯示全部數(shù)據(jù)
      this.visibleTableData = [...this.originalTableData];
      return;
    }
    // 遞歸過(guò)濾樹(shù)形表格數(shù)據(jù)（示例邏輯，需根據(jù)實(shí)際數(shù)據(jù)結(jié)構(gòu)調(diào)整）
    this.visibleTableData = this.originalTableData.filter(item => {
      return this.checkRowMatch(item, this.searchKeyword);
    });
  },
  // 檢查行數(shù)據(jù)是否匹配搜索條件
  checkRowMatch(row, keyword) {
    // 檢查當(dāng)前行需要高亮的字段
    const fields = ['content', 'projectName', 'form', 'receiverName'];
    for (const field of fields) {
      if (row[field] && row[field].toString().includes(keyword)) {
        return true;
      }
    }
    // 遞歸檢查子節(jié)點(diǎn)
    if (row.details && row.details.length > 0) {
      for (const child of row.details) {
        if (this.checkRowMatch(child, keyword)) {
          return true;
        }
      }
    }
    return false;
  }
}

.highlight {
  background-color: #ffeb3b; /* 黃色背景，可自定義 */
  color: #333;
  font-weight: 500;
  padding: 0 2px;
  border-radius: 2px;
}