在vue2中使用el-date-picker组件，我希望实现一个功能，组件接受一个数组，数组内是若干日期，例如dates: ["2023-05-23", "2023-05-22", "2023-05-19"]，现在希望在组件的日期下拉框中，在数组对应的日期下通过伪元素添加一个蓝色的小圆点（并不影响组件的整体格式），仅用作提示效果，请给出代码示例

可以使用 CSS 伪元素 `::before` 或 `::after` 来实现这个功能。具体实现步骤如下：

1. 在 `el-date-picker` 组件的 `mounted` 钩子中，获取日期下拉框的选项元素。
2. 遍历日期数组，对于每个日期，找到对应的选项元素，添加一个具有蓝色背景的伪元素。
3. 使用 CSS 伪元素的 `content` 属性来插入圆点，使用 `position`、`left`、`top` 等属性来定位和样式圆点。

下面是一个代码示例：

<template>
  <el-date-picker v-model="date" type="date"></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      date: "",
      dates: ["2023-05-23", "2023-05-22", "2023-05-19"]
    };
  },
  mounted() {
    const options = this.$el.querySelector(".el-picker-panel__body .el-picker-panel__content");
    this.dates.forEach(date => {
      const option = options.querySelector(`td.available:not(.disabled) div[title="${date}"]`);
      if (option) {
        option.style.position = "relative";
        option.style.paddingRight = "12px"; // 防止圆点被遮挡
        const dot = document.createElement("span");
        dot.style.display = "block";
        dot.style.position = "absolute";
        dot.style.content = "' '";
        dot.style.width = "6px";
        dot.style.height = "6px";
        dot.style.borderRadius = "50%";
        dot.style.backgroundColor = "blue";
        dot.style.left = "calc(100% - 10px)";
        dot.style.top = "50%";
        dot.style.transform = "translateY(-50%)";
        option.appendChild(dot);
      }
    });
  }
};
</script>

<style>
/* 可以添加这些样式来调整圆点的位置和大小 */
.el-picker-panel__content div span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: blue;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}
</style>

这段代码利用了 `querySelector` 方法来找到日期下拉框中对应日期的选项元素，然后使用 `appendChild` 方法向选项元素中添加一个 `span` 元素作为圆点。注意需要在 `span` 元素上设置 `position: absolute` 和 `display: block`，以便让 `content` 属性生效。通过调整 `left`、`top`、`transform` 等样式来定位和样式圆点。

另外，由于 `el-date-picker` 组件的样式可能会随着版本变化而变化，上面的代码可能需要根据实际情况进行一些微调。