覆盖element-ui控件宽高样式记录：el-input、el-date-picker、el-time-picker、el-button

设置el-input宽高

  <el-input
        v-model="name"
        placeholder="请输入"></el-input>

:deep(.el-input) {
    
    
    width: 160px;
    height: 24px;
    .el-input__inner {
    
    
      height: 100%;
    }
    .el-input__icon {
    
    
      line-height: inherit;
    }
  }

设置el-date-picker宽高

  <el-date-picker
          v-model="date"
          value-format="yyyy"
          type="year"
          placeholder="请选择年份"></el-date-picker>

:deep(.el-date-editor) {
    
    
  width: 100%;
  height: 30px;
  line-height: 30px;
  .el-input__inner {
    
    
    height: 100%;
  }
  .el-input__icon {
    
    
    line-height: inherit;
  }
}

el-date-picker范围选择宽高

<el-date-picker
        v-model="date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"></el-date-picker>

  .el-date-editor {
    
    
    height: 24px;
    width: auto !important;
    .el-range-input {
    
    
      width: 100px;
    }
    .el-range__icon {
    
    
      line-height: 18px;
    }
    .el-range__close-icon {
    
    
      line-height: 16px;
    }
    /* “至”字的样式 */
    .el-range-separator {
    
    
      line-height: 15px;
      width: auto;
    }
  }

设置el-time-picker时分范围选择器宽高

该组件默认时分秒，设置时分需要设置value-format和format属性
该组件默认打开是当前时分，设置dafaultTime变量值为new Date().setHours(0, 0, 0, 0)表示从0点开始

   <el-time-picker
        is-range
        v-model="time"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围"
        format="HH:mm"
        value-format="HH:mm"
        :default-value="dafaultTime"></el-time-picker>

主要样式可以与上方el-date-picker通用

  /* 范围选择日期框 */
  .el-date-editor {
    
    
    height: 24px;
    width: auto !important;
    .el-range-input {
    
    
      width: 100px;
    }
    .el-range__icon {
    
    
      line-height: 18px;
    }
    .el-range__close-icon {
    
    
      line-height: 16px;
    }
    .el-range-separator {
    
    
      line-height: 15px;
      width: auto;
    }
  }
  /* el-time-picker控件独有的选择器 */
  .el-date-editor--timerange {
    
    
    .el-range-input {
    
    
      width: 70px;
    }
  }

设置el-button按钮宽高

 <el-button
        type="primary"
        size="mini"
        class="ml">
        查询
      </el-button>

通过padding来控制宽高

  .el-button--mini {
    
    
    padding: 5px 15px;
  }