element-table 相关样式修改

1. 表格整体背景色修改

/* 表格整体背景色 */
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent !important;
}

2. 表格内tr背景色修改

::v-deep .el-table tr {
  background-color: transparent !important;
  border: 0;
  /* 设置字体大小 */
  font-size: 14px;
}

3. 表格内th背景色修改

::v-deep .el-table th {
  background-color: transparent !important;
  border: 0;
  /* 设置字体大小 */
  font-size: 14px;
}

4. 表格内td背景色修改

::v-deep .el-table td {
  background-color: transparent !important;
  border: 0;
  /* 设置字体大小 */
  font-size: 14px;
}

5.用来设置当前页面鼠标移入某行时的背景色

::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: transparent !important;
  /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
}

6.设置选中某一行时的样式   注意：需要在<el-table />中添加highlight-current-row属性，才会有选中的效果

 

::v-deep .current-row {
  /* 选中时的图片显示 */
  background: url("assets/td2.png") no-repeat !important;  
  background-size: 100% 100% !important;
}
 
/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: transparent !important;
    /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
}

 

 

 

7.设置表格行高

::v-deep .el-table__body tr,
::v-deep .el-table__body td {
  padding: 0;
  height: 64px;
}

 

8.去除表格底部的线

::v-deep .el-table::before {
  height: 0px;
}

9.修改表头样式-加边框

::v-deep .el-table__header-wrapper {
  border: solid 1px #04c2ed;
  /* box-sizing: border-box; */
}