element-ui使用

一、table表格行样式

• cell-style 样式设置

1. 在<el-table>中设置:cell-style="cellStyle"cellStyle为样式回调方法

 <el-table :data="tableData" border class="table"  
                :cell-style="cellStyle" style="font-size:10px">

2. 编写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

1. 设置table header的背景颜色

.el-table__header th, .el-table__header tr {

  background-color: #17B3A3;

  color: black;

}

2. 设置表主体的高度

.el-table__body td,.el-table__body th{

  padding:1px;

}

3. 设置表头的高度

.el-table__header td,.el-table__header th{

  padding:6px 0px;

}

4. 设置分页器的高度

.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

1. 一级菜单高度设置

.sidebar .el-submenu__title {
    height: 45px;
    line-height: 45px;
    position: relative;
    -webkit-box-sizing: border-box;
    white-space: nowrap;
    list-style: none;
}

2. 子菜单高度设置

   
   
   image.png

.sidebar .el-submenu .el-menu-item {
    height: 40px;
    line-height: 40px;
    padding: 0 45px;
    min-width: 200px;
}