//表格//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
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 1 年前
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 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐