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

最新推荐文章于 2025-06-13 13:40:27 发布

lfl18326162160

最新推荐文章于 2025-06-13 13:40:27 发布

阅读量552

点赞数 2

CC 4.0 BY-SA版权

分类专栏： element-ui 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/lfl18326162160/article/details/148105247

element-ui 专栏收录该内容

10 篇文章

订阅专栏

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