Element UI 表格搜索高亮

需求：

输入关键词后点击搜索或按回车，匹配的行将变为浅蓝色背景。支持姓名和部门模糊匹配。

代码实现：

<template>
    <div id="app">
        <div class="app-container">
            <div class="header">
                <h2>员工信息表 - 搜索高亮演示</h2>
                <div class="search-area">
                    <el-input
                        v-model="searchKeyword"
                        placeholder="请输入姓名或部门进行搜索"
                        prefix-icon="el-icon-search"
                        clearable
                        style="width: 250px;"
                        @keyup.enter.native="handleSearch"
                    ></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="resetSearch">重置</el-button>
                </div>
            </div>

            <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                border
                stripe
                highlight-current-row
            >
                <el-table-column prop="date" label="入职日期" width="180" sortable></el-table-column>
                <el-table-column prop="name" label="姓名" width="180" sortable>
                    <template slot-scope="scope">
                        <span :style="{ fontWeight: scope.row.name.includes(searchKeyword) && searchKeyword ? 'bold' : 'normal' }">
                            {{ scope.row.name }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="department" label="部门" width="180" sortable></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <div class="tips">
                * 提示：输入关键词后点击搜索或按回车，匹配的行将变为浅蓝色背景。支持姓名和部门模糊匹配。
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'table-data',
  data() {
    return {
		searchKeyword: '',
		// 原始数据，用于重置
		originalTableData: [
			{ date: '2023-01-15', name: '张三', department: '技术部', address: '北京市朝阳区科技路1号' },
			{ date: '2023-02-20', name: '李四', department: '产品部', address: '上海市浦东新区创新路2号' },
			{ date: '2023-03-10', name: '王五', department: '技术部', address: '深圳市南山区高新园3号' },
			{ date: '2023-04-05', name: '赵六', department: '市场部', address: '杭州市西湖区文一路4号' },
			{ date: '2023-05-12', name: '孙七', department: '人事部', address: '成都市高新区天府大道5号' },
			{ date: '2023-06-18', name: '周八', department: '技术部', address: '武汉市洪山区光谷广场6号' },
			{ date: '2023-07-22', name: '吴九', department: '财务部', address: '南京市玄武区中山路7号' },
			{ date: '2023-08-30', name: '郑十', department: '产品部', address: '西安市雁塔区曲江新区8号' }
		],
		// 当前显示的数据
		tableData: []
    }
  },
  created(){
	// 初始化数据
	this.tableData = [...this.originalTableData];
  },
  mounted(){
    
  },
  methods: {
	/**
	 * 核心方法：动态行类名
	 * Element UI 会在每次渲染行时调用此函数
	 * @param {Object} param - { row, rowIndex }
	 * @returns {String} - 类名字符串
	 */
	tableRowClassName({ row, rowIndex }) {
		if (!this.searchKeyword) {
			return '';
		}
		
		const keyword = this.searchKeyword.toLowerCase();
		// 匹配姓名或部门
		const matchName = row.name && row.name.toLowerCase().includes(keyword);
		const matchDept = row.department && row.department.toLowerCase().includes(keyword);
		
		if (matchName || matchDept) {
			return 'highlight-row';
		}
		return '';
	},
	
	/**
	 * 搜索按钮点击事件
	 * 这里我们不需要过滤数据，只需要触发视图更新即可
	 * 因为 tableRowClassName 依赖 searchKeyword，Vue 的响应式系统会自动处理
	 */
	handleSearch() {
		// 强制刷新表格视图（通常不需要，但为了保险起见可以调用）
		// this.$forceUpdate(); 
		this.$message.success(`已搜索关键词: "${this.searchKeyword}"`);
	},
	
	/**
	 * 重置搜索
	 */
	resetSearch() {
		this.searchKeyword = '';
		this.$message.info('已重置搜索条件');
	},
	
	handleEdit(row) {
		this.$message.info(`编辑用户: ${row.name}`);
	}
  }
}
</script>

<style lang="less" scoped>

	.app-container {
		max-width: 1200px;
		margin: 0 auto;
		background: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
	.header {
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.search-area {
		display: flex;
		gap: 10px;
	}

	/* 
	 * 关键样式：高亮行背景色 
	 * 使用 !important 确保优先级高于 Element UI 默认样式
	 */
	.el-table .highlight-row {
		background-color: #e6f7ff !important;
		color: #1890ff;
	}

	/* 
	 * 关键样式：高亮行悬停时的背景色 
	 * 防止鼠标移上去时背景色变回默认灰色
	 */
	.el-table__body tr.highlight-row:hover > td {
		background-color: #bae7ff !important;
	}

	/* 针对斑马纹表格的特殊处理，如果开启了 stripe */
	.el-table--striped .el-table__body tr.el-table__row--striped.highlight-row td {
		background-color: #e6f7ff !important;
	}

	.tips {
		margin-top: 10px;
		font-size: 12px;
		color: #909399;
	}
</style>

代码说明：

1. ‌核心逻辑 ‌：利用 Element UI el-table 的 :row-class-name 属性，绑定 tableRowClassName 方法。该方法在每次表格渲染或数据更新时执行，根据当前的 searchKeyword 判断每一行是否匹配。
2. ‌响应式更新 ‌：当用户在输入框输入内容并点击"搜索"或按回车时，searchKeyword 变量更新。由于 Vue 的响应式机制，表格会重新渲染，从而重新执行 tableRowClassName，实现动态高亮。
3. ‌样式穿透 ‌：使用了 CSS 类 .highlight-row 并配合 !important 来覆盖 Element UI 默认的表格行背景色和悬停色，确保高亮效果明显且不被 hover 状态覆盖。
4. ‌用户体验‌：添加了重置按钮、回车搜索支持、以及简单的操作反馈（Message 提示），界面采用卡片式布局，整洁美观。