elementui中el-data-picker自定义样式

在Element UI中，el-data-picker组件的默认样式是由CSS进行定义的。如果你需要自定义样式，可以通过CSS来覆盖默认样式。

以下是一个简单的例子，展示如何通过CSS来修改el-data-picker的背景颜色和边框颜色：

<template>
  <el-data-picker
    v-model="value"
    class="custom-date-picker"
    :picker-options="pickerOptions">
  </el-data-picker>
</template>
 
<script>
export default {
  data() {
    return {
      value: '',
      pickerOptions: {
        // 你的选项配置
      }
    };
  }
};
</script>
 
<style>
/* 自定义日期选择器的背景颜色 */
.custom-date-picker .el-input__inner {
  background-color: #f0f2f5;
}
 
/* 自定义日期选择器打开时的背景颜色 */
.custom-date-picker .el-date-picker__popper {
  background-color: #eaecef;
}
 
/* 自定义日期选择器的边框颜色 */
.custom-date-picker .el-input__inner,
.custom-date-picker .el-date-picker__popper {
  border: 1px solid #d3dce6;
}
</style>

在这个例子中，.custom-date-picker是应用到el-data-picker组件上的自定义类。在CSS中，我们通过指定这个类来选择性地覆盖默认的样式。你可以根据需要修改选择器和属性值来自定义你的el-data-picker组件。