Element-ui时间选择器组件添加样式不起效果，似乎是元素一开始没初始化怎么办？

在使用Element-UI的el-date-picker组件时候，想要将月份范围下拉框的头部，即年份去除掉，如图，

在网上参考了一些方法是直接在样式中将header对应的标签隐藏，如下图所示，对应的是.el-date-range-picker__header这个类

并在style中写了下面的内容：

<style scoped lang="scss">
.due_month ::v-deep .el-date-range-picker__header {
        display: none;
    }
 
  .due_month ::v-deep .el-date-range-picker__content.is-right {
 
        display: none;
    }
 
  .due_month ::v-deep .el-picker-panel__body {
        width: 200%;
    }

  ::v-deep .el-date-range-picker__header {
        display: none;
    }
  /*选择日期，年份的隐藏 */
  .due_month {
    ::v-deep .el-date-picker__header {
    span:nth-child(3) { /*第三个标签是span的标签，把它隐藏*/
      display: none;
    }
    button:nth-child(1) {
      display: none;
    }
    button:nth-child(5) {
      display: none;
    }
  }
}
</style>

但是无一例外都没有成功将该年份隐藏。
此外，我尝试直接通过dom操作元素，但是发现该元素似乎一开始没有初始化，即对应的月份选择的下拉框，必须是我点击月份选择后才出现元素，猜测是通过js添加元素创建，请问我该怎么做？

建议看一下官网，官网有demo

【以下回答由 GPT 生成】

我可以帮助你解决这个问题。根据你提供的代码和描述，有几个可能的原因导致你的样式不起作用：

1. Element-UI的样式覆盖了你的样式：Element-UI的样式有一定的优先级，可能会覆盖你的自定义样式。要解决这个问题，你可以使用!important来提高你的样式的优先级，或者使用更具体的选择器来选择你要修改的元素。

2. 样式作用域问题：在你的代码中，你使用了scoped属性来限定样式的作用域。如果你的样式是在父组件中定义的，并且需要作用于子组件的元素，那么你需要使用>>>或/deep/来穿透父组件的作用域。但是需要注意的是，/deep/在Sass中已被废弃，所以建议使用>>>。

3. 错误的选择器：你的选择器可能不正确。要修改头部的样式，你需要找到正确的选择器来选择该元素。你可以使用浏览器的开发者工具来检查元素的类名和层级关系。

综上所述，我建议你尝试以下几个解决方案：

1. 使用!important提高样式优先级：

<style scoped lang="scss">
.due_month ::v-deep .el-date-range-picker__header {
    display: none !important;
}
</style>

1. 使用>>>穿透样式作用域：

<style scoped lang="scss">
.due_month >>> .el-date-range-picker__header {
    display: none;
}
</style>

1. 检查选择器是否正确：

<style scoped lang="scss">
.due_month >>> .el-date-range-picker__header {
    display: none;
}

.due_month >>> .el-date-picker__header {
    span:nth-child(3) {
        display: none;
    }
    button:nth-child(1) {
        display: none;
    }
    button:nth-child(5) {
        display: none;
    }
}
</style>

如果以上方法都没有解决你的问题，可能是Element-UI在组件初始化时动态创建了相关元素，这时你可以使用Vue的生命周期钩子函数mounted来延迟添加样式的操作，确保组件初始化完成后再添加样式。

<template>
  <el-date-picker
    v-model="selectDate"
    class="due_month"
    :picker-options="pickerOptions"
    @change="handleChange"
    @mounted="handleMounted"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      selectDate: null,
    };
  },
  methods: {
    handleChange(value) {
      // 处理日期变化的逻辑
    },
    handleMounted() {
      // 组件初始化完成后回调函数
      this.$nextTick(() => {
        const header = document.querySelector('.due_month .el-date-picker__header');
        // 添加样式的操作
      });
    },
  },
};
</script>

<style scoped lang="scss">
/* 添加你的样式 */
</style>

希望这些解决方案可以帮助你解决问题。如果以上方法都没有起作用，可能是由于Element-UI更新或其他原因导致样式不起效果，建议你参考Element-UI的文档或寻求Element-UI社区的帮助。

https://blog.csdn.net/weixin_44423850/article/details/118998437
看一下这个