Vue中的自定义主题datepicker元素-ui

Question

我有一个网站，用户可以选择date_range，因此我使用datepicker element-ui。但是datepicker的默认主题是如何在vue中更改它。

Answer 1

目前，Element-UI不提供高度自定义主题的功能，仅提供简单的自定义尺寸和颜色。

但是，您可以使用以下配置自定义样式：

popper-class -DatePicker下拉菜单的自定义类名称

picker-options -您可以通过使用 picker-options 属性创建一个cellClassName对象来设置自定义类名称。

您可以使用自定义类覆盖默认样式。

示例：

// template
<el-date-picker v-model="value1"
                type="date"
                popper-class="custom-date-picker"
                placeholder="Pick a day">
</el-date-picker>

// css
.custom-date-picker{
  .el-date-picker__header{
    // custom header style here
  }
}