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

一、改变背景颜色
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" >
    &lt;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模拟假数据：

 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>

2、data模拟假数据：

 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>

2、在css(less)中

/deep/.current-row {
  td {
    background-color:  pink !important;   //背景色
    color: white !important;              //字体颜色
  }
}

代码007普通

打赏 收藏 海报 链接