改变表格中表头、行 样式element ui

改变表格中样式element ui

1. 方法一

html

 <el-table :data="data_list" :cell-style="timeStyle">
 //表格内容
 </el-table>

js

methods:{
	timeStyle(column) {
	//可以直接 return "background:#EF3737;color:#fff;"//css样式
	//下面内容需求判断可借鉴
	      for(var i=0;i<column.row.length;i++){
				if(column.row[i] === '未完成'&&column.columnIndex== i+Number(1) ) {//判断在当前这列内容为‘未完成’的样式
						 return "background:#EF3737;color:#fff;"//css样式
			     }else if(column.row[i] === '完成'&&column.columnIndex== i+Number(1)  )	{
						 return "background:#6F9C2C;color:#fff;"
				}
	       }	  
	 },
 }

改变表格中表头、行 样式

2. 方法二

预览：

html

<el-table :header-row-class-name="tableHeadName" :row-class-name="tableRowClassName"
      header-align="center" :data="tableData"></el-table>

js

methods:{
	// 修改表格样式
	tableRowClassName({ row, rowIndex }) {
	//可以直接return "class类名";不用写下面的判断，那是需求可借鉴
      if (rowIndex % 2 == 0) {//算数判断奇数、偶数
        return "warning-row";//class 类名
      } else {
        return "success-row";//class 类名
      }
    },
    // 添加表头class类名,修改表头样式
    tableHeadName({ row, rowIndex }) {
      return "headerTable";
    },
}

css

.el-table {
    .headerTable th {
      background-color: #dbf2ff;
      text-align: center;
    }
    .warning-row {
      background: #fff;
    }
    .success-row {
      background: #fcfcfc;
    }
 }