vue2表格改变高亮颜色

### 更改 Vue2 表格中行或单元格的高亮颜色 在 Vue2 的 `el-table` 组件中，可以通过自定义 CSS 和 JavaScript 方法来更改表格行或单元格的高亮颜色。以下是具体实现方法： #### 1. 自定义单元格样式 通过 `cell-style` 属性可以动态设置单元格的样式。例如，在用户修改某个单元格的内容后，可以通过比较原始数据和当前数据来决定是否应用特定样式。 ```javascript methods: { cellStyle({ row, column, rowIndex, columnIndex }) { if (this.tableDataCopy[rowIndex][column.property] !== row[column.property]) { return { 'background-color': 'rgb(144, 199, 255)' }; // 被修改过的单元格显示为蓝色 } return {}; } } ``` 上述代码会遍历每一行和列的数据，并对比原数据副本 (`tableDataCopy`) 和当前数据显示差异[^1]。 #### 2. 移除默认 Hover 效果 如果希望移除鼠标悬停时的默认灰色背景色，可以在 `<style>` 中覆盖 `.el-table__body tr:hover td` 的样式。 ```css <style scoped> /* 移除 hover 默认效果 */ ::v-deep(.el-table__body tr:hover > td) { background-color: transparent !important; } /* 如果需要自定义 hover 颜色 */ ::v-deep(.el-table__body tr:hover > td) { background-color: rgba(0, 128, 255, 0.1); /* 浅蓝色透明度 */ } </style> ``` 此部分代码利用了 `scoped` 样式以及 `::v-deep` 来穿透作用域限制，从而影响子组件的样式[^2]。 #### 3. 使用自定义指令调整行为 对于更复杂的场景，还可以借助 Vue 的自定义指令功能。例如，创建一个用于检测单元格状态的指令。 ```javascript // 定义全局指令 Vue.directive('highlight', { bind(el, binding) { const isModified = binding.value; // 判断是否被修改 if (isModified) { el.style.backgroundColor = 'rgba(255, 165, 0, 0.3)'; } }, }); ``` 然后在模板中绑定该指令： ```html <el-table-column prop="name" label="姓名"> <template slot-scope="{ row }"> <span v-highlight="row.isModified">{{ row.name }}</span> </template> </el-table-column> ``` 这种方式更加灵活，适用于复杂逻辑下的样式控制[^4]。 #### 4. 实现可编辑单元格的功能扩展 为了进一步增强用户体验，可以结合表单控件使某些单元格变为可编辑模式。这通常涉及监听输入事件并实时更新模型值。 ```html <el-table :data="tableData" style="width: 100%"> <el-table-column prop="age" label="年龄" width="180"> <template slot-scope="scope"> <el-input v-if="scope.row.editable" size="mini" v-model="scope.row.age"></el-input> <span v-else>{{ scope.row.age }}</span> </template> </el-table-column> </el-table> ``` 在此基础上，配合 `cellStyle` 方法即可轻松标记已编辑区域[^5]。 --- ### 总结 以上介绍了多种方式来自定义 Vue2 中 `el-table` 的高亮颜色及其交互体验优化方案。无论是简单的样式替换还是深入业务逻辑处理，都可以找到合适的工具和技术栈完成目标。