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

elementUI 中el-date-picker和el-select的样式调整

1.  el-date-picker

<el-date-picker class="select1" size="small" v-model="timeRangeArr" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
</el-date-picker>pickerOptions: {shortcuts: [{text: '最近一周',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', [start, end]);}}, {text: '最近一个月',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);picker.$emit('pick', [start, end]);}}, {text: '最近三个月',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);picker.$emit('pick', [start, end]);}}]},timeRangeArr: []style.select1 {margin-top: 10px;margin-left: 13px;outline: none;width: 240px;background-color: transparent;
}.select1>>>.el-range-input {font-size: 13px;width: 80px;color: white;background-color: transparent;
}.select1>>>.el-range-separator {color: white;
}

2. el-select

<el-select v-model="value" placeholder="" size="mini" class="select1"><el-option  v-for="item in options":key="item.Id":label="item.Wcname":value="item.Id"></el-option>
</el-select>.select1{margin-top: 10px;margin-left: 13px;outline: none;}.select1>>> .el-input--mini{font-size: 8px;width: 80px;color: white;
}
/* selecte 框的高度设置,默认是 40px*/
.select1>>>.el-input__inner{height: 20px;padding: 0px;padding-left: 8px;padding-right: 18px;color: white;background-color: #598684;
}
/* 下面设置右侧按钮居中 */
.select1>>> .el-input__suffix {top: 3px;/* margin-left: 0px; */
}
.select1>>>.el-input__icon {line-height: inherit;width: 15px;color: white;}
.select1>>>.el-input__suffix-inner {display: inline-block;
}
/deep/ .el-select-dropdown__item {color: #0957f5;height: 20px;line-height: 20px;font-size: 9px;
}

http://www.xdnf.cn/news/561835.html

相关文章:

  • CSS 文字样式全解析:从基础排版到视觉层次设计
  • spring-boot-starter-data-redis应用详解
  • C# AI(Trae工具+claude3.5-sonnet) 写前后端
  • maven快速上手
  • AI练习:混合圆
  • 【优秀三方库研读】在 quill 开源库 LogMarcos.h 中知识点汇总及讲解
  • CVE-2018-1270源码分析与漏洞复现(spring-messaging 表达式注入)
  • Flask 路由装饰器:从 URL 到视图函数的优雅映射
  • 使用Terraform创建azure databrick
  • 每日算法 -【Swift 算法】寻找字符串中最长回文子串(三种经典解法全解析)
  • 【工具教程】图片识别内容改名,图片指定区域识别重命名,批量识别单据扫描件批量改名,基于WPF和腾讯OCR的实现方案
  • HTML5 Video (视频) 深入解析
  • WPF···
  • [Java实战]Spring Boot整合MinIO:分布式文件存储与管理实战(三十)
  • Taro Error: chunk common [mini-css-extract-plugin]
  • 单片机设计_四轴飞行器(STM32)
  • apache http client连接池实现原理
  • 网络学习-利用reactor实现http请求(六)
  • K个一组链表翻转
  • 【大前端】使用NodeJs HTTP模块创建web服务器、SSE通讯
  • 运维web服务器
  • Java—— IO流 第二期
  • 怎么把cursor(Cursor/ollama)安装到指定路径
  • 从 CANopen到 PROFINET:网关助力物流中心实现复杂的自动化升级
  • 软考 测试 静态测试 动态测试
  • 2025ICPC南昌邀请赛流水账
  • 有理函数积分的一般方法
  • Data Vault 2.0:企业数据建模的现代方法
  • IDEA推送到gitlab,jenkins识别,然后自动发布到需要的主机
  • 【Django】Django DRF 中如何手动调用分页器返回分页数据(APIView,action场景)