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

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.lryc.cn/news/2386265.html

相关文章:

  • 《仿盒马》app开发技术分享-- 定位获取(端云一体)
  • 黑马点评--基于Redis实现共享session登录
  • Mujoco 学习系列(二)基础功能与xml使用
  • 比特授权云外壳加密支持Android 15!
  • uniapp使用sse连接后端,接收后端推过来的消息(app不支持!!)
  • 历年复旦大学保研上机真题
  • 黑马点评-实现安全秒杀优惠券(使并发一人一单,防止并发超卖)
  • 解决论文中字体未嵌入的问题
  • leetcode 131. Palindrome Partitioning
  • Android本地语音识别引擎深度对比与集成指南:Vosk vs SherpaOnnx
  • 审计报告附注救星!实现Word表格纵向求和+横向计算及其对应的智能校验
  • 人工智能数学基础实验(四):最大似然估计的-AI 模型训练与参数优化
  • 告别延迟!Ethernetip转modbustcp网关在熔炼车间监控的极速时代
  • Kotlin协程优化Android ANR问题
  • Visual Studio Code插件离线安装指南:从市场获取并手动部署
  • 构建安全AI风险识别大模型:CoT、训练集与Agent vs. Fine-Tuning对比
  • 计算机视觉---YOLOv1
  • 无法同步书签,火狐浏览器修改使用国内的账号服务器
  • 动态防御体系实战:AI如何重构DDoS攻防逻辑
  • Kotlin Native与C/C++高效互操作:技术原理与性能优化指南
  • 爬虫核心概念与工作原理详解
  • Flink架构概览,Flink DataStream API 的使用,FlinkCDC的使用
  • vue3前端后端地址可配置方案
  • Es6中怎么使用class实现面向对象编程
  • digitalworld.local: FALL靶场
  • MySQL---库操作
  • 动态规划算法:字符串类问题(2)公共串
  • uni-app(5):Vue3语法基础上
  • 深度解析Vue项目Webpack打包分包策略 从基础配置到高级优化,全面掌握性能优化核心技巧
  • ubuntu下docker安装mongodb-支持单副本集