elementui样式修改

el-table

html 复制代码

 <el-table
             border
             :data="tableData"
             :header-cell-style="{backgroundColor:'#D1E8FD',textAlign:'center',borderColor:'#D7D7D7',padding:0,height:'38px'}"
             :row-class-name="tableRowClassName"
             :cell-style="{textAlign:'center',padding:0,fontSize:'12px'}"
             :row-style="{height:'36px'}"
             style="width: 100%">
             </el-table>

修改表头：设置:header-cell-style ：修改背景颜色，表头的高度

修改表行颜色： :row-class-name ：根据rowIndex 返回不同的样式 ===》这个样式不能在scope下，不然会不生效

修改表行高度：设置:cell-style的padding和 :row-style的height

:header-cell-style ：可以写一个函数，返回对应的style对象，，

js 复制代码

  /**
     *
     * @param row  所有的 header cell
     * @param column 每一个column
     * @param rowIndex 行号
     * @param columnIndex 列号
     */
    headerCellStyle({row,rowIndex,columnIndex}){

    let styleObj = {textAlign:'center',backgroundColor:'#FAFAFA',borderTop:"1px solid #E8E8E8"}
      console.log(row,columnIndex,typeof row)
      if (columnIndex === 0){
        return {...styleObj,borderLeft: "1px solid #E8E8E8"}
      }
      if (columnIndex === row.length-1){
        return {...styleObj,borderRight: "1px solid #E8E8E8"}
      }
      return styleObj
    }

引用：https://blog.csdn.net/qq_38950919/article/details/81056447

el-pagination

全局引入这个css：

css 复制代码

/* 跳转的样式*/
 .el-pagination .el-pagination__jump{
  margin-left: 0;
}
/*
// page-sizes选择器
//::v-deep .el-select-dropdown__item li{
  //  background-color:red !important;
  //}
*/
/* prev和next箭头的样式*/
.el-pagination .btn-next,
.el-pagination .btn-prev{
     background:transparent !important;
     background-color:transparent !important;
     border: 1px solid #e8e8e8;
   }
/* prev和next箭头disabled的样式
//::v-deep .el-pagination button:disabled {
  //  background-color:transparent !important;
  //}
 */
/* 页码样式*/
   .el-pager li{
       background-color:#fff !important;
       border: 1px solid #e8e8e8;
       border-radius: 4px !important;
     }
/*active的页码样式*/
  .el-pager li.active{
     color: #fff !important;
     background-color:#008AC4 !important;
   }

修改el-pagination文字：

js 复制代码

document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳转";

引用：https://zhuanlan.zhihu.com/p/349079144

el-pagination样式修改：

css 复制代码

// page-sizes选择器
::v-deep .el-select-dropdown__item li{
  background-color:transparent !important;
}
// prev和next箭头的样式
::v-deep .el-pagination .btn-next,
::v-deep .el-pagination .btn-prev{
  background:transparent !important;
  background-color:transparent !important;
}
// prev和next箭头disabled的样式
::v-deep .el-pagination button:disabled {
  background-color:transparent !important;
}
// 页码样式
::v-deep .el-pager li{
  background-color:transparent !important;
}
// active的页码样式
::v-deep .el-pager li.active{
  color: #267aff !important;
}

引用：https://blog.csdn.net/kirinlau/article/details/129166785