//表格//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; 
}

 

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐