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

更新时间:2023-06-26 21:40:48 阅读: 评论:0

healthy的反义词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以上版本不可以
小米路由器ip
写法:
/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;
}

本文发布于:2023-06-26 21:40:48,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/89/1056278.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:表格   样式   修改   选中   背景
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图