一、改变背景颜色
1、在el–table表头中添加属性：:cell–style=“addClass”
（设置表头背景颜色:header–cell-style=“{ background: ‘#F7FBFE’, color: ‘#000’ }”）
<el-table border :header-cell-style="{ background: '#F7FBFE', 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>
data(){
return{
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: yellow;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>
data(){
return{
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=“tableClassName”
<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
<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>
/deep/.current-row {
td {
background-color: pink !important; //背景色
color: white !important; //字体颜色
}
}
原文地址:https://blog.csdn.net/qq_55031668/article/details/128831533
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_26090.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
