element表格样式修改

1.背景颜色

.el-table {
    color: #fff!important;
}
.el-table th {
    text-align: center!important;
    background-color: #144F61!important;
    color: #fff!important;
    font-size: 17px!important;
    font-weight: 800!important;
    border-color:  #12333C!important;
}
.el-table tr {
    background-color: #244951!important;
}
.el-table td {
    text-align: center!important;
    border-color:  #12333C!important;
}


/*去掉鼠标移入表格变色*/
.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #244951!important;
}

2.边框颜色

/*去掉表格边框颜色*/
.el-table--border::after,
.el-table--group::after,
.el-table::before
{
    background-color: #12333C!important;
}
.el-table--border,
.el-table--group {
    border-color: #12333C!important;
}
/*表头下面的白线去掉*/
.el-table th.el-table__cell.is-leaf{
    border-bottom: 0!important;
}

3.奇偶行背景颜色不同

1) 给el-table加:row-class-name方法

<el-table :row-class-name="tableClass"></el-table>

2) 在methods中加入方法

  methods: {
    //偶数加背景色
    tableClass({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        //奇数行，序号不能被2整除
        return "even-row";
      } else {
        return "success-row";
      }
    },
   }，

3) 在css里定义奇偶行颜色

 .el-table {
            color: #000;
            .even-row {
                       background: #e8e8e8;
            }
            .success-row {
                       background: #f4f4f4;
            }
 }

4.去掉表头

:show-header="false"

5.加行高(行高存在最小值,低于一定值时不再变化)

row-style="height:80px"

6. 减行高(修改el-table元素中cell-style属性里的padding值)

.el-table .el-table__cell {
    padding: 5px 0!important;
}

或者

cell-style="padding:5px"

7.修改表格内字体颜色

:cell-style="isRed"

在methods:{}添加方法

isRed({ row, columnIndex }) {
  let colors = ["#ef3758", "#01D69E", "#FEB220", "#40B2D7"];
  if (columnIndex == 2) {        //columnIndex从0开始
    return {
      color: colors[row.deviceStatus],
    };
  }
},

8.表格内容居中（在每个el-table-column中添加）

align="center"

9.添加表格边框（在el-table中添加）

border

element表格样式修改

悦读