element-ui表格table、抽屉drawer涉及的部分样式修改

//表格//element-ui的table改变选中行背景色

/deep/.el-table__body tr.current-row > td {
    background-color: #F0F7FF !important; 
}

//表格//element-ui的table改变偶数行背景色

/deep/.el-table--striped .el-table__body tr.el-table__row--striped td{
    // background: #F5F7FA;
}

//表格//解决element-ui的table表格控件表头与内容列不对齐问题

.el-table th.gutter {

    display: table-cell!important;

}

//抽屉//element-ui的drawer固定底部按钮

/deep/ .el-drawer__body{

    overflow-y: scroll;

    margin-bottom: 50px;

}

.demo-drawer__footer{

  width: 100%;

  position: absolute;

  bottom: 0;

  left: 0;

  border-top: 1px solid #e8e8e8;

  padding: 10px 16px;

  text-align: right;

  background-color: white;

}

//抽屉//去掉element-ui的drawer标题选中状态

/deep/ :focus{

  outline:0;

}

 

针对评论区的问题整理：

 

有些样式直接在组件中修改无效，而scoped局限于当前组件，去掉scoped的话又会影响全局样式。

针对这种情况，可以使用深度作用选择器（即样式穿透）。

 

1. >>>

如果项目使用的是css原生样式，那么可以直接使用 >>> 穿透修改

 写法：

.myclass >>> .el-upload-list .el-upload-list__item img {
  width: 20px;
  height: 20px;
}

2. /deep/

项目中用到了预处理器 scss 、sass、less 操作符 >>> 可能会因为无法编译而报错 。可以使用 /deep/。如果element-ui的样式为行内，使用穿透的情况下可以再加上!important来增加权重
注意：vue-cli3以上版本不可以

写法：

/deep/.el-table__body tr .current-row > td {
    background-color: #F0F7FF !important; 
}

3. ::v-deep

如果使用了预处理器都可以使用 ::v-deep

写法：

::v-deep .el-table__body tr.current-row > td {
    background-color: #F0F7FF !important; 
}