• ElementUI样式优化：el-input修改样式、el-table 修改表头样式、斑马格样式、修改滚动条样式、

    效果图： 

    1、改变日期时间组件的字体颜色背景

    .form-class ::v-deep .el-date-editor {

        border: 1px solid #326AFF;

        background: #04308D !important;

      }

      .form-class ::v-deep .el-date-editor.el-input__wrapper {

        box-shadow: 0 0 0 0px #326AFF inset;

      }

    // 输入框

      .form-class ::v-deep .el-date-editor .el-range-input{

        background: #04308D !important;

        font-size: 14px;

        font-family: PingFang SC, PingFang SC;

        font-weight: 400;

        color: #FFFFFF;

      }

    //   中间的至字

      .form-class ::v-deep  .el-date-editor .el-range-separator{

        background: #04308D !important;

        color: #FFFFFF;

      }

    .form-class ::v-deep   .el-range__close-icon{

        background: #04308D !important;

        color: #FFFFFF;

      }

    修改element-ui日期下拉框datetimePicker的背景色样式-CSDN博客 弹窗样式在这里

    2、修改input的字体颜色背景

       // 输入框

      .form-class ::v-deep .el-input__wrapper {

        border: 1px solid #326AFF;

        box-shadow: 0 0 0 0px #326AFF inset;

        background: #04308D !important;

      }    

         // 输入框

       ::v-deep  .el-input__inner{

            background: #04308D !important;

            font-size: 14px;

            font-weight: 400;

            color: #FFFFFF;

          }  

    3、修改按钮颜色

    .blue-button{

      background-color: #326aff;

      border: 1px solid #326AFF;

    }

    4、去表格的白线

    .el-table{

        // 去掉白线

        --el-table-border-color:#063570;

    }

    不写就会有如下白线 

     5、设置表格行高度

     // 设置表格行高度

    ::v-deep .el-table__body tr,

    ::v-deep .el-table__body td {

      padding: 0;

      height: 40px;

    }

    6、表格内背景颜色

    // 表格内背景颜色

    ::v-deep .el-table th,

    ::v-deep .el-table tr,

    ::v-deep .el-table td {

      background-color:#063570;  

      border: 0px;

      color: #fff;  // 修改字体颜色

      font-size: 24px;

      height: 5px;

      font-weight: Normal;

    }

    7、 修改表头样式-加边框 和背景色

      // 修改表头样式-加边框

    ::v-deep .el-table__header-wrapper {

        border: solid 1px #00429c;

        // box-sizing: border-box;

      }

       // 修改表头样式-背景色

      ::v-deep .el-table__header thead tr th{

        border: #002C69 0px solid;  

        background: linear-gradient(to top, #0085FB, #002C69)!important;

        color: #FFFFFF;

      }

    8、 表格斑马自定义颜色 

    表格部分 

    js部分添加 

    const tableRowClassName = ({ row, rowIndex }) => {

      if (rowIndex % 2 == 0) {

        return "warning-row1";

      } else {

        return "warning-row2";

      }

    }

      // 表格斑马自定义颜色

    ::v-deep .el-table__row.warning-row1 {

        background: #03367c;

        border: #002C69 0px solid;

        color: #FFFFFF;

    }

      ::v-deep .el-table__row.warning-row2 {

        background: #002C69;

        border: #002C69 0px solid;

        color: #FFFFFF;

    }

    9、鼠标悬停行颜色改变

    补充：暂无数据时的表格背景颜色

    ::v-deep .el-table__empty-block{

        background-color: #063570;

        color: #fff; // 修改字体颜色

    }

    10、滚动条的样式

      // 滚动条样式

    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {

        background-color: #063570;

      }

      ::v-deep .el-table__body-wrapper::-webkit-scrollbar {

        width: 10px;

        opacity: 0.5;

      }

      ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {

        border-radius: 15px;

        background-color: #0257aa;

      }

    11、分页样式

    1.  
    2. //   分页
    3. ::v-deep .pagination-container{
    4.     background: #063570!important;
    5.  
    6. }
    7.     //这是123454   
    8. ::v-deep .el-pager li{
    9.     border: 1px solid #326AFF;
    10.     background: #04308D !important;
    11.     color: #FFFFFF;
    12. }
    13. ::v-deep .el-pager li.is-active{
    14.     background: #0873fd !important;
    15. }
    16. // <这个
    17. ::v-deep .btn-prev {
    18.     // border: 1px solid #326AFF;
    19.     background-color: #04308D !important;
    20.     color: #FFFFFF;
    21. }
    22. //  >这个
    23. ::v-deep .btn-next {
    24.     // border: 1px solid #326AFF;
    25.     background-color: #04308D !important;
    26.     color: #FFFFFF;
    27. }
    28. // 前往
    29. ::v-deep .el-pagination__jump .el-pagination__goto{
    30.     color: #FFFFFF;
    31.     
    32. }
    33. // 页码筛选的input
    34.  
    35. ::v-deep .el-pagination__jump .el-input{
    36.     border: 1px solid #326AFF;
    37.     background: #04308D !important;
    38.     color: #FFFFFF;
    39.     
    40. } 
    41. ::v-deep .el-pagination__jump .el-input .el-input__wrapper{
    42.     // border: 1px solid #326AFF;
    43.     background: #04308D !important;
    44.     box-shadow: 0 0 0 0px #326AFF inset;
    45.     color: #FFFFFF;
    46.     
    47. }
    48. // 页
    49. ::v-deep .el-pagination__jump .el-pagination__classifier{
    50.     color: #FFFFFF;
    51.     
    52. }
    53.  
    54. // el-input el-input--default el-pagination__editor is-in-pagination

     12、总代码 

    1.  <el-dialog class="blue-dialog" v-model="dialogVisible" title="工单列表" width="80%" custom-class="openAnimAbcd" draggable>
    2.     <el-form :inline="true" :model="queryParams" ref="queryParamsRef" class="demo-form-inline form-class"
    3.       label-width="68px">
    4.  
    5.       <el-form-item label="时间筛选" prop="time">
    6.         <el-date-picker class="custom-timeselect" v-model="time" type="datetimerange" range-separator="至"
    7.           start-placeholder="开始时间" end-placeholder="结束时间" style="width: 380px" value-format="YYYY-MM-DD HH:mm:ss"
    8.           :shortcuts="shortcuts" @change="changetime" :default-time="defaultTime" />
    9.       el-form-item>
    10.       <el-form-item label="输入框" prop="time">
    11.         <el-input style="width: 70px" v-model="queryParams.number1" placeholder="请输入"  :error="durationInputError(queryParams.number1)"
    12.           @input="handleDurationInput1(queryParams.number1)">el-input> 
    13.         <span style=" color: #FFFFFF">至span>
    14.          
    15.         <el-input style="width: 70px" v-model="queryParams.number2" placeholder="请输入"
    16.           :error="durationInputError(queryParams.number2)"
    17.           @input="handleDurationInput2(queryParams.number2)">el-input>
    18.       el-form-item>
    19.       <el-form-item>
    20.         <el-button type="primary" class="blue-button" size="Small" @click="handleExport">导出el-button>
    21.         <el-button type="primary" class="blue-button" @click="resetQuery" size="Small">重置el-button>
    22.         <el-button type="primary" size="Small" class="blue-button" @click="getecharstData">搜索el-button>
    23.       el-form-item>
    24.     el-form>
    25.     <el-table :data="tableData" height="55vh" :row-class-name="tableRowClassName" key='xqtable'
    26.       :highlight-current-row="false">
    27.       <el-table-column prop="name" label="名字" min-width="80" />
    28.       <el-table-column prop="name" label="名字" min-width="80" />
    29.       <el-table-column prop="name" label="名字" min-width="80" />
    30.       <el-table-column prop="name" label="名字" min-width="80" />
    31.       <el-table-column prop="name" label="名字" min-width="80" />
    32.       <el-table-column prop="name" label="名字" min-width="80" />
    33.       <el-table-column prop="name" label="名字" min-width="80" />
    34.       <el-table-column prop="name" label="名字" min-width="80" />
    35.       <el-table-column prop="name" label="名字" min-width="80" />
    36.       <el-table-column prop="name" label="名字" min-width="80" />
    37.       
    38.     el-table>
    39.     <pagination :page-sizes="[100, 200, 500, 1000, 2000, 5000]" v-show="total > 0" :total="total" class="paginationyhd"
    40.       v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="openTable" />
    41.   
    42.   el-dialog>

     js部分

    const tableRowClassName = ({ row, rowIndex }) => {

      if (rowIndex % 2 == 0) {

        return "warning-row1";

      } else {

        return "warning-row2";

      }

    }

    样式引入

    css页面：

    1.  
    2. /* 改变整个输入框的字体颜色背景 */
    3. ::v-deep  .el-form-item__label {
    4.     color: #FFFFFF;
    5. }
    6. .form-class ::v-deep .el-date-editor {
    7.     border: 1px solid #326AFF;
    8.     background: #04308D !important;
    9.   }
    10.   .form-class ::v-deep .el-date-editor.el-input__wrapper {
    11.     box-shadow: 0 0 0 0px #326AFF inset;
    12.   }
    13. // 输入框
    14.   .form-class ::v-deep .el-date-editor .el-range-input{
    15.     background: #04308D !important;
    16.     font-size: 14px;
    17.     font-family: PingFang SC, PingFang SC;
    18.     font-weight: 400;
    19.     color: #FFFFFF;
    20.   }
    21. //   中间的至字
    22.   .form-class ::v-deep  .el-date-editor .el-range-separator{
    23.     background: #04308D !important;
    24.     color: #FFFFFF;
    25.   }
    26. .form-class ::v-deep   .el-range__close-icon{
    27.     background: #04308D !important;
    28.     color: #FFFFFF;
    29.   }
    30.  
    31.   
    32.    // 输入框
    33.   .form-class ::v-deep .el-input__wrapper {
    34.     border: 1px solid #326AFF;
    35.     box-shadow: 0 0 0 0px #326AFF inset;
    36.     background: #04308D !important;
    37.   
    38.   }    
    39.      // 输入框
    40.    ::v-deep  .el-input__inner{
    41.         background: #04308D !important;
    42.         font-size: 14px;
    43.         font-weight: 400;
    44.         color: #FFFFFF;
    45.       }                    
    46. .blue-button{
    47.   background-color: #326aff;
    48.   border: 1px solid #326AFF;
    49.  
    50. }
    51.  
    52.  
    53. .el-table{
    54.     // 去掉白线
    55.     --el-table-border-color:#063570;
    56.  
    57. }
    58. // 设置表格行高度
    59. ::v-deep .el-table__body tr,
    60. ::v-deep .el-table__body td {
    61.   padding: 0;
    62.   height: 40px;
    63. }
    64. // 表格内背景颜色
    65. ::v-deep .el-table th,
    66. ::v-deep .el-table tr,
    67. ::v-deep .el-table td {
    68.   background-color:#063570;  
    69.   border: 0px;
    70.   color: #fff;  // 修改字体颜色
    71.   font-size: 24px;
    72.   height: 5px;
    73.   font-weight: Normal;
    74. }
    75.   // 修改表头样式-加边框
    76. ::v-deep .el-table__header-wrapper {
    77.     border: solid 1px #00429c;
    78.     // box-sizing: border-box;
    79.   }
    80.    // 修改表头样式-背景色
    81.   ::v-deep .el-table__header thead tr th{
    82.     border: #002C69 0px solid;  
    83.     background: linear-gradient(to top, #0085FB, #002C69)!important;
    84.     color: #FFFFFF;
    85.   }
    86.   // 表格斑马自定义颜色
    87. ::v-deep .el-table__row.warning-row1 {
    88.     background: #03367c;
    89.     border: #002C69 0px solid;
    90.     color: #FFFFFF;
    91. }
    92.   ::v-deep .el-table__row.warning-row2 {
    93.     background: #002C69;
    94.     border: #002C69 0px solid;
    95.     color: #FFFFFF;
    96. }
    97.  
    98. .el-table .el-table__body tr:hover {
    99.     background-color: #0873fd !important; /* 设置鼠标悬停时的背景色 */
    100.     color: black !important; /* 设置文字颜色 */
    101.   }
    102.  
    103.  
    104.   // 滚动条样式
    105. ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
    106.     background-color: #063570;
    107.   }
    108.   ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    109.     width: 10px;
    110.     opacity: 0.5;
    111.   }
    112.   ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    113.     border-radius: 15px;
    114.     background-color: #0257aa;
    115.   }

     希望对你有帮助

  • 相关阅读:
    如何快速绘制任意角度的扇形？
    前端通用后台登录解决方案（一站式解决封装axios模块、接口请求模块、登录请求动作、本地缓存处理、登录鉴权解决）
    记录一次爬虫接单项目【采集国际淘宝数据】
    Error creating bean with name ‘apiModelSpecificationReader‘ defined in URL
    Jackson之ObjectMapper常用用法
    C++11——“=default“和“=delete“函数特性
    防抖(debounce)和节流(throttle)区别详细讲解及案例练习
    数据库保存之Java字符串的压缩与解压缩
    淘宝扭蛋机小程序：扭动未来，乐享购物新纪元
    休眠和睡眠有哪些区别？如何让电脑一键休眠？
  • 原文地址：https://blog.csdn.net/weixin_47194802/article/details/140041939