Element-UI的table表格的样式的常用的操作_el-table 样式

element官方文档：
https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-slot

一、设置表头样式
需求：将表头样式改为背景色蓝色，字体颜色白色，字重400

1.字符串形式：直接将tableStyle名称赋值给header-cell-class-name

<el-table 
   :data="tableData[lang]"  
   border 
   :header-cell-style='tableHeaderStyle'
 >
1
2
3
4
5

说明：表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。
类型：Function({row, column, rowIndex, columnIndex})/Object
函数形式：将tableHeaderStyle方法传递给header-cell-style
编写tableHeaderStyle方法，返回样式

tableHeaderStyle ({row, column, rowIndex, columnIndex}) {

 	return 'background-color:#1989fa;color:#fff;font-weight:400;'
 	
}
1
2
3
4
5

2.对象形式：直接在对象中编写样式

<el-table 
  :data="tableData[lang]" 
   border 
   :header-cell-style="{
     'background-color': '#1989fa',
     'color': '#fff',
     'font-weight': '400'
 }">
1
2
3
4
5
6
7
8

二、设置行样式

需求：将表格中行的字体颜色设置为浅蓝色
1.row-class-name
Function({row, rowIndex})/String
省略代码

2.row-style
Function({row, rowIndex})/Object

<el-table
   :data="tableData"
   border
   :row-style="tableRowStyle"
 >
1
2
3
4
5

编写tableRowStyle方法，返回样式
// 修改table tr行的字体

tableRowStyle ({ row, rowIndex }) {
  return 'color:#ecf5ff'
 }
1
2
3

三、设置列样式

<el-table
   :data="tableData"
   border
   :cell-style="cellStyle"
 >

 /*cellStyle({row,column,rowIndex,columnIndex}){
   return "font-size:15px;color:red;"
  },*/
  cellStyle({column,columnIndex}){
   return "font-size:15px;color:red;"
  },


  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

四、设置行列综合写法

<el-table
   :data="tableData"
   border
   :cell-style="cellStyle"
 >

 cellStyle({row,column,rowIndex,columnIndex}){
   return "font-size:15px;color:red;"
 },
 


  
1
2
3
4
5
6
7
8
9
10
11
12
13
14