devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：IT小白 | 2024-08-06 05:30:52

赞

踩

el-input 样式

效果图： 

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、 表格斑马自定义颜色 

表格部分 

<el-table :data="tableData" height="55vh" :row-class-name="tableRowClassName"

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、鼠标悬停行颜色改变

<style>

/* 用来设置当前页面element全局table 选中某行时的背景色*/

/*鼠标移入某行时的背景色*/

.el-table--enable-row-hover .el-table__body tr:hover>td {

  background-color: #0873fd !important;

  /* 设置鼠标悬停时的背景色 */

  color: black !important;

  /* 设置文字颜色 */

}

</style>

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

::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>&nbsp;
  13.         <span style=" color: #FFFFFF">至</span>
  14.         &nbsp;
  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";

  }

}

样式引入

<style src="@/assets/styles/dialog.scss" scoped />

<style>

.el-table--enable-row-hover .el-table__body tr:hover>td {

  background-color: #0873fd !important;

  /* 设置鼠标悬停时的背景色 */

  color: black !important;

  /* 设置文字颜色 */

}

</style>

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.   }

 希望对你有帮助

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/935968
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号