elementui中table表格单元格背景、文字颜色修改(包含鼠标移入移出)
·
一、改变背景颜色
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
<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)中
/deep/.current-row {
td {
background-color: pink !important; //背景色
color: white !important; //字体颜色
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)