elementui中table表格单元格背景、文字颜色修改（包含鼠标移入移出）_elementui修改表格背景颜色

一、改变背景颜色
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>
1
2
3
4
5

2、data模拟假数据：

    tableData:[{ date:'2023-02-01', Name:'张三',}],
1

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
2
3
4
5
6
7
8
9

二、鼠标移入改变背景、文字颜色
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>
1
2
3
4
5

2、data模拟假数据：

     tableData:[{ date:'2023-02-01', Name:'张三',}],
1

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');
},
1
2
3
4
5
6
7
8
9
10
11
12

4、在css中

<style lang="less" scoped>
	 /deep/ .el-table td.cellClass{
	    background-color: pink !important;
	    color:white
	  }
</style>
1
2
3
4
5
6

三、鼠标移入移出无背景颜色：

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>
1
2
3
4
5

2、在methods中

tableRowClassName({row, rowIndex}) {
  return 'background: white;';
}
1
2
3

四、鼠标选中当前行，改变当前行背景颜色

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>
1
2
3
4
5

2、在css(less)中

/deep/.current-row {
  td {
    background-color:  pink !important;   //背景色
    color: white !important;              //字体颜色
  }
}
1
2
3
4
5
6