Element UI 表格样式自定义

前言：下面是官方文档的创建带边框表格（border） 和带斑马纹表格（stripe）方法，但颜色太淡不明显

<el-table  border  stripe"> </el-table>

那么只能改一下它的默认样式了

一.在公共样式文件中引入：

  /* 鼠标滑过高亮显示 */
.el-table tbody tr:hover>td { ">(189, 189, 189)!important } 

          /* 表格线 */
.el-table--border, .el-table--group { border-color: rgb(209, 206, 206); } 
.el-table--border:after, .el-table--group:after, .el-table:before { ">(209, 206, 206); }                     
.el-table td, .el-table--border th,.el-table th.is-leaf { border-bottom-color: rgb(209, 206, 206);}                  
.el-table--border td, .el-table--border th { border-right-color:rgb(209, 206, 206);}
          /*  斑马纹表格背景 */
.el-table--striped .el-table__body tr.el-table__row--striped td { background:rgb(228, 228, 228)}

二.可以根据下面方法，按照自己想要的样式修改：

• 修改表格头部背景

.el-table th{
    background: red;
  }

• 修改表格行背景

.el-table tr{
   background:blue;
  }

• 修改斑马线表格的背景

.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: goldenrod;
  }

• 修改行内线的颜色

.el-table td,.building-top .el-table th.is-leaf {
    border-bottom:  1px solid goldenrod;
  }

• 修改表格最底部边框颜色和高度

.el-table::before{
   border-bottom:  1px solid blue;
    height: 2px
  }

• 修改表头字体颜色

.el-table thead {
    color: #8EB7FA;
    font-weight: 500;
  }

• 修改表格内容字体颜色和字体大小

.el-table{
    color: #6B81CE;
    font-size: 14px;
  }

• 修改表格无数据的时候背景，字体颜色

.el-table__empty-block{
    background: #16603C;
  }
.el-table__empty-text{
  color: #blue
}

• 修改表格鼠标悬浮hover背景色

.el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: blue;
}