el-table添加行/单元格样式

---

---

一、官方文档释义

1.row-style/cell-style

行/单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有行/单元格设置一样的 Style。参数类型：Function({row, rowIndex})/Object

2.row-class-name/cell-class-name

行/单元格的 className 的回调方法，也可以使用字符串为所有行/单元格设置一个固定的 className。参数类型：Function({row, column, rowIndex, columnIndex})/Object

---

二、row-style/cell-style的使用

1.row-style

使用Object

代码如下（示例）：

<template>
 <div>
   <el-table :data="tableData" :row-style="{'background-color':'pink','color':'white'}">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>

效果如下（示例）：
使用固定对象Object传参时，会为所有行添加统一的样式。但是如果想给指定的行添加样式，就无法使用Object传参了，需要使用Function了

使用Function

代码如下（示例）：

<template>
 <div>
   <el-table :data="tableData" :row-style="rowStyle">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>
<script>
export default {
	methods:{
   		rowStyle({row,rowIndex}){
     		if(row.name=="王小狼"){
       			return {
         			"background":"skyblue",
         			"color":"green"
       			}
     		}
   		}
	}
}
</script>

效果如下（示例）：
使用Function就可以为指定的行添加样式

2.cell-style

使用Object

代码如下（示例）：

<template>
 <div>
   <el-table :data="tableData" :cell-style="{'background-color':'blue','color':'red'}">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>

效果如下（示例）：
使用固定的对象传参，会为所有单元格都加上统一的样式，效果与row-style传固定对象效果一样。同样，如果要为指定单元格添加样式，就需要用到Function，效果也会与row-style产生差异

使用Function

代码如下（示例）：

<template>
 <div>
   <el-table :data="tableData" :cell-style="cellStyle">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>

 methods:{
   cellStyle({row,column,rowIndex,columnIndex}){
     if(row.name=="王小狼" && column.property=="name"){
       return {
         "background":"gray",
         "color":"purple"
       }
     }
   }
}

效果如下（示例）：
使用行、列数据就可以为指定单元格添加样式了

---

三、row-class-name/cell-class-name的使用

1.row-class-name

使用String

代码如下（示例）：

<template>
 <div>
   <el-table :data="tableData" row-class-name="rowName">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>
<style>
.rowName{
 background:pink!important;
 color:deeppink
}
</style>

效果如下（示例）：

使用Function

代码如下（示例）：

<template>
 <div>
   <el-table :data="tableData" :row-class-name="rowClassName">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>
<script>
export default = {
 methods:{
   rowClassName({row,columnIndex}){
     if(row.date=="2022-05-01"){
       return "rowName"
     }
   }
 }
} 
</script>
<style>
.rowName{
 background:deeppink!important;
 color:whitesmoke
}
</style>

效果如下（示例）：

2.cell-class-name

使用String

代码如下（示例）：

<template>
 <div>
   <el-table :data="tableData" cell-class-name="cellName">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
</div>
</template>
<style>
.cellName{
 background:brown!important;
 color:chartreuse
}
</style>

效果如下（示例）：

使用Function

代码如下（示例）：

<template>
 <div>
   <el-table :data="tableData" :cell-class-name="cellClassName">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>

 methods:{
   cellClassName({row,column,rowIndex,columnIndex}){
     if(row.date!="2022-05-01" && column.label=="日期"){
       return "cellName"
     }
   }
 }

<style>
.cellName{
 background:blueviolet!important;
 color:aqua
}
</style>

效果如下（示例）：