一、改变背景颜色
1、在el-table表头中添加属性：:cell-style=“addClass”
（设置表头背景颜色:header-cell-style=“{ background: ‘#999999’, color: ‘#000’ }”）
<el-table border :header-cell-style="{ background: '#999999', color: '#000' }" :data="tableData" :cell-style="addClass" >
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column align="center" label="日期" prop="date"></el-table-column>
<el-table-column align="center" label="姓名" prop="Name"></el-table-column>
</el-table>
2、data模拟假数据：
tableData:[{ date:'2023-02-01', Name:'张三',}],
3、在methods中：
addClass({row,column,rowIndex,columnIndex}){
// console.log(row);
// console.log(columnIndex);
if(columnIndex === 2){
if(row.Name == '张三'){
return 'background: pink;color:white';
}
}
},
二、鼠标移入改变背景、文字颜色
1、在el-table表头中添加属性：@cell-mouse-enter=“cellMouseEnter” @cell-mouse-leave=“cellMouseLeave”
<el-table :data="tableData" @cell-mouse-enter="cellMouseEnter" @cell-mouse-leave="cellMouseLeave" >
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column align="center" label="日期" prop="date"></el-table-column>
<el-table-column align="center" label="姓名" prop="Name"></el-table-column>
</el-table>
2、data模拟假数据：
tableData:[{ date:'2023-02-01', Name:'张三',}],
3、在methods中：
cellMouseEnter(row, column, cell, event) {
//console.log(column);
//console.log(cell);
// 移入姓名单元格，单元格边框变色
if (column.property === 'Name') {
cell.classList.add('cellClass');
}
},
// 移出单元格 恢复默认色
cellMouseLeave(row, column, cell, event) {
cell.classList.remove('cellClass');
},
4、在css中
<style lang="less" scoped>
/deep/ .el-table td.cellClass{
background-color: pink !important;
color:white
}
</style>
三、鼠标移入移出无背景颜色：
1、在el-table表头中添加属性：:cell-style=“tableRowClassName”
<el-table :data="tableData" :cell-style="tableClassName">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column align="center" label="日期" prop="date"></el-table-column>
<el-table-column align="center" label="姓名" prop="Name"></el-table-column>
</el-table>
2、在methods中
tableRowClassName({row, rowIndex}) {
return 'background: white;';
}
四、鼠标选中当前行，改变当前行背景颜色
1、在el-table表头中添加属性：highlight-current-row文章来源：https://www.toymoban.com/news/detail-778188.html
<el-table :data="tableData" highlight-current-row>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column align="center" label="日期" prop="date"></el-table-column>
<el-table-column align="center" label="姓名" prop="Name"></el-table-column>
</el-table>
2、在css(less)中文章来源地址https://www.toymoban.com/news/detail-778188.html
/deep/.current-row {
td {
background-color: pink !important; //背景色
color: white !important; //字体颜色
}
}
到了这里，关于elementui中table表格单元格背景、文字颜色修改（包含鼠标移入移出）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
