表单样式更改

发表于 | 分类于 |
字数统计: 315 字 | 阅读时长 ≈ 1 分钟

前言

记录 Element 表单样式更改

更改头部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// 1. 函数写法
<el-table :header-cell-style="rowClass"></el-table>
//在method里面写上方法
rowClass({ row, rowIndex}) {
  console.log(rowIndex) //表头行标号为0
  return 'background:red'
}
// 2. 对象写法
<el-table :header-cell-style="{background:'red'}"></el-table>

// 更改表格中某个单元格的样式
// 1. 函数写法
<el-table :cell-style="cellStyle"></el-table>
//在method里面写上方法
cellStyle({row, column, rowIndex, columnIndex}){
  if(rowIndex === 1 && columnIndex === 2){ //指定坐标
    return 'background:pink'
  }else{
    return ''
  }
}
// 2. 对象写法
<el-table :cell-style="{background:'pink'}"></el-table>
cellStyle({row, column, rowIndex, columnIndex}){  
  if(columnIndex === 1){//指定列号  
    return 'background:pink'  
  }else{  
    return ''  
  }  
} 
// 3. className
<el-table :row-class-name="tabRowClassName"
>
  tabRowClassName({ rowIndex }) {
  const index = rowIndex + 1;
  if (index % 2 === 0) {
    return 'even-row';
  }
}

表单内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 居中
.el-table td,
.el-table th {
  text-align: center !important;
}

// 设置表头和行高度
.el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 40px;
}
.el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 40px;
}

实现某列居中：<el-table-colum align="center"></el-table-column>