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

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

news 来源：原创 2025/5/23 13:14:25

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