Element组件中table表格搜索修单元格颜色

在Element UI的表格（Table）组件中，如果你想要实现搜索功能并根据搜索结果改变单元格的颜色，可以结合`v-model`指令以及自定义的过滤函数来操作。首先，你需要设置一个数据属性来保存搜索关键词，并监听这个属性的变化来进行搜索。然后，在渲染每一行的时候，你可以检查当前行的数据是否匹配搜索关键词，如果匹配则改变该单元格的样式。 这是一个简单的示例： ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名" sortable></el-table-column> <!-- 添加一个搜索框 --> <el-form-item label="搜索"> <el-input v-model="searchKey" placeholder="请输入关键字"></el-input> </el-form-item> <el-table-column prop="color" label="颜色"> <template slot-scope="scope"> <span v-bind:class="{ 'highlight': scope.row.color === searchKey }">{{ scope.row.color }}</span> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', color: '红色' }, { name: '李四', color: '蓝色' }, // 更多数据... ], searchKey: '', }; }, methods: { handleSearchChange(key) { this.searchKey = key; // 这里可以根据需要对数据进行过滤 // 如果你想实时搜索，可以使用数组的filter方法 // this.filteredData = this.tableData.filter(item => item.color.includes(key)); }, }, watch: { searchKey(newKey) { this.handleSearchChange(newKey); }, }, }; </script> <style scoped> .highlight { background-color: yellow; /* 可根据需求修改高亮颜色 */ } </style> ``` 在这个例子中，当用户输入的搜索关键词与某一行的“颜色”字段相匹配时，那一行的“颜色”单元格会被加上黄色背景色（`background-color: yellow`）。记得在实际应用中替换`handleSearchChange`方法里的过滤逻辑，以满足你的具体业务需求。