element-ui表格table、抽屉drawer涉及的部分样式修改
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
//表格//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 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)