当前位置： 首页 > news >正文

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

news 2025/7/16 9:50:31

效果图： 

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、分页样式


//   分页
::v-deep .pagination-container{background: #063570!important;}//这是123454   
::v-deep .el-pager li{border: 1px solid #326AFF;background: #04308D !important;color: #FFFFFF;
}
::v-deep .el-pager li.is-active{background: #0873fd !important;
}
// <这个
::v-deep .btn-prev {// border: 1px solid #326AFF;background-color: #04308D !important;color: #FFFFFF;
}
//  >这个
::v-deep .btn-next {// border: 1px solid #326AFF;background-color: #04308D !important;color: #FFFFFF;
}
// 前往
::v-deep .el-pagination__jump .el-pagination__goto{color: #FFFFFF;}
// 页码筛选的input::v-deep .el-pagination__jump .el-input{border: 1px solid #326AFF;background: #04308D !important;color: #FFFFFF;} 
::v-deep .el-pagination__jump .el-input .el-input__wrapper{// border: 1px solid #326AFF;background: #04308D !important;box-shadow: 0 0 0 0px #326AFF inset;color: #FFFFFF;}
// 页
::v-deep .el-pagination__jump .el-pagination__classifier{color: #FFFFFF;}// el-input el-input--default el-pagination__editor is-in-pagination

 12、总代码 

 <el-dialog class="blue-dialog" v-model="dialogVisible" title="工单列表" width="80%" custom-class="openAnimAbcd" draggable><el-form :inline="true" :model="queryParams" ref="queryParamsRef" class="demo-form-inline form-class"label-width="68px"><el-form-item label="时间筛选" prop="time"><el-date-picker class="custom-timeselect" v-model="time" type="datetimerange" range-separator="至"start-placeholder="开始时间" end-placeholder="结束时间" style="width: 380px" value-format="YYYY-MM-DD HH:mm:ss":shortcuts="shortcuts" @change="changetime" :default-time="defaultTime" /></el-form-item><el-form-item label="输入框" prop="time"><el-input style="width: 70px" v-model="queryParams.number1" placeholder="请输入"  :error="durationInputError(queryParams.number1)"@input="handleDurationInput1(queryParams.number1)"></el-input>&nbsp;<span style=" color: #FFFFFF">至</span>&nbsp;<el-input style="width: 70px" v-model="queryParams.number2" placeholder="请输入":error="durationInputError(queryParams.number2)"@input="handleDurationInput2(queryParams.number2)"></el-input></el-form-item><el-form-item><el-button type="primary" class="blue-button" size="Small" @click="handleExport">导出</el-button><el-button type="primary" class="blue-button" @click="resetQuery" size="Small">重置</el-button><el-button type="primary" size="Small" class="blue-button" @click="getecharstData">搜索</el-button></el-form-item></el-form><el-table :data="tableData" height="55vh" :row-class-name="tableRowClassName" key='xqtable':highlight-current-row="false"><el-table-column prop="name" label="名字" min-width="80" /><el-table-column prop="name" label="名字" min-width="80" /><el-table-column prop="name" label="名字" min-width="80" /><el-table-column prop="name" label="名字" min-width="80" /><el-table-column prop="name" label="名字" min-width="80" /><el-table-column prop="name" label="名字" min-width="80" /><el-table-column prop="name" label="名字" min-width="80" /><el-table-column prop="name" label="名字" min-width="80" /><el-table-column prop="name" label="名字" min-width="80" /><el-table-column prop="name" label="名字" min-width="80" /></el-table><pagination :page-sizes="[100, 200, 500, 1000, 2000, 5000]" v-show="total > 0" :total="total" class="paginationyhd"v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="openTable" /></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页面：


/* 改变整个输入框的字体颜色背景 */
::v-deep  .el-form-item__label {color: #FFFFFF;
}
.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;}// 输入框.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;}                    
.blue-button{background-color: #326aff;border: 1px solid #326AFF;}.el-table{// 去掉白线--el-table-border-color:#063570;}
// 设置表格行高度
::v-deep .el-table__body tr,
::v-deep .el-table__body td {padding: 0;height: 40px;
}
// 表格内背景颜色
::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;
}// 修改表头样式-加边框
::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;}// 表格斑马自定义颜色
::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;
}.el-table .el-table__body tr:hover {background-color: #0873fd !important; /* 设置鼠标悬停时的背景色 */color: black !important; /* 设置文字颜色 */}// 滚动条样式
::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;}

 希望对你有帮助

http://www.lryc.cn/news/389146.html

相关文章：

  • 大数据面试题之Spark(6)
  • SpringSecurity中文文档（Servlet Anonymous Authentication）
  • 【Spring Boot 事务管理】
  • 【C++】C++指针在线程中调用与受保护内存空间读取方法
  • 安全隔离上网的有效途径：沙箱
  • jenkins下后台运行链接Jenkins服务脚本方法
  • 宠物空气净化器哪个品牌性价比高？宠物空气净器Top3品牌推荐
  • 苏州大厂面试题JAVA 面试集
  • 数据库取出来的日期格式是数组格式，序列化日期格式
  • 【Android】创建一个可以在屏幕上拖动的悬浮窗
  • SPI NAND、SD NAND和eMMC对比—MK米客方德
  • “深入解析：YUM仓库、RPM包与源码编译——Linux软件安装方式全面对比“
  • 中电金信：银行业私有云何去何从
  • Adobe Acrobat Pro或者Adobe Acrobat Reader取消多标签页显示，设置打开一个pdf文件对应一个窗口。
  • 从0开始学习pyspark--pyspark的数据读取[第4节]
  • 极速升级：MacOS系统中Pip源的切换指南
  • 服务器的分类，主流服务器的应用场景
  • Objects and Classes (对象和类)
  • 从单点到全景：视频汇聚/安防监控EasyCVR全景视频监控技术的演进之路
  • Java学习 -Golang开发环境+目录结构+编译+部署
  • Redis 典型应用——缓存（缓存预热，穿透，雪崩，击穿）
  • Sharding-JDBC分库分表的基本使用
  • 7月信用卡新规下：信用卡欠的钱不用还了？
  • 坑——python的redis库的decode_responses设置
  • 从项目中学习Bus-Off的快慢恢复
  • 视频参考帧和重构帧复用
  • js修改scss变量
  • 【中霖教育怎么样】报考注册会计师有年龄限制吗?
  • PHP验证日本手机电话号码
  • Qt 配置ASan