一、table表格行样式
- cell-style 样式设置
- 在
<el-table>中设置:cell-style="cellStyle"cellStyle为样式回调方法
<el-table :data="tableData" border class="table"
:cell-style="cellStyle" style="font-size:10px">
- 编写cellStyle回调方法：
// 设置表格样式
cellStyle({row, column, rowIndex, columnIndex}){
return "padding:0" #样式
},
结果如下：
padding:0
注意：如果直接在<el-table>中设置cell-style="padding:0"运行会报错:Invalid prop: type check failed for prop "cellStyle". Expected Object, Function, got String with value . 因为cell-style接受一个function/object，不能是String
二、el-table表头高度、颜色设置
先看样式截图：
image.png
-
CSS代码：
我是把样式写在index.html 中的
image.png
- 设置table header的背景颜色
.el-table__header th, .el-table__header tr {
background-color: #17B3A3;
color: black;
}
- 设置表主体的高度
.el-table__body td,.el-table__body th{
padding:1px;
}
- 设置表头的高度
.el-table__header td,.el-table__header th{
padding:6px 0px;
}
- 设置分页器的高度
.site-wrapper .el-pagination {
margin-top: 5px;
text-align: right;
}
.el-pager li.active {
color: #080909;
cursor: default;
background-color: #17B3A3;
border-radius: 2px;
}
三、# element-ui navmenu 高度设置
在使用导航菜单栏的位置外边包一层class，如下class="sidebar"，然后将样式加到style中
image.png
- 一级菜单高度设置
.sidebar .el-submenu__title {
height: 45px;
line-height: 45px;
position: relative;
-webkit-box-sizing: border-box;
white-space: nowrap;
list-style: none;
}
-
子菜单高度设置
image.png
.sidebar .el-submenu .el-menu-item {
height: 40px;
line-height: 40px;
padding: 0 45px;
min-width: 200px;
}
