element-table 相关样式修改

标签：el 样式 deep element color important background 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;
}

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; */
}

 

 

 

标签：el,样式,deep,element,color,important,background,table
From： https://www.cnblogs.com/a973692898/p/17215791.html