elementui样式修改-Toy模板网

这篇具有很好参考价值的文章主要介绍了elementui样式修改。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

el-table

elementui样式修改,elementui,vue.js,前端

 <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对象，，

  /**
     *
     * @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

elementui样式修改,elementui,vue.js,前端
全局引入这个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文字：

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

elementui样式修改,elementui,vue.js,前端

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

el-pagination样式修改：

// 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;
}