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

好的，针对你的问题，我可以给出以下代码示例，供你参考：

<template>
  <el-date-picker
    v-model="selectedDate"
    type="date"
    :picker-options="pickerOptions"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null, // 存储选中的日期
      dates: ["2023-05-23", "2023-05-22", "2023-05-19"], // 存储需要添加小圆点的日期
      pickerOptions: {
        // 选项中的 disabledDate 方法会在日期单元格渲染时触发
        disabledDate: (date) => {
          const year = date.getFullYear();
          const month = date.getMonth() + 1;
          const day = date.getDate();
          const cell = document.querySelector(
            `.el-date-table td[data-year="${year}"][data-month="${month}"][data-date="${day}"]`
          );
          // 获取到日期单元格的父元素（在这里是 td 元素）
          const parent = cell && cell.parentNode;
          if (parent) {
            // 在日期单元格下方添加小圆点
            if (this.dates.includes(`${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`)) {
              const dot = document.createElement('div');
              dot.className = 'blue-dot';
              parent.appendChild(dot);
            }
          }
          // 返回 true 或 false，表示该日期单元格是否可用
          return false;
        },
      },
    };
  },
};
</script>

<style>
.blue-dot {
  width: 6px;
  height: 6px;
  background-color: blue;
  border-radius: 50%;
  margin: 0 auto;
  margin-top: 5px;
}
</style>

在代码中，我们通过设置 `pickerOptions` 属性，自定义了 `disabledDate` 方法。该方法会在日期单元格渲染时触发，我们可以在该方法中获取到当前单元格的年月日信息，然后通过 `document.querySelector` 方法获取到该单元格的父元素，从而对其进行其他的操作。

在日期单元格下方添加小圆点的操作，我们通过创建一个新的 `div` 元素，并设置其样式，然后将其作为子元素添加到日期单元格的父元素中。需要注意的是，在 `disabledDate` 方法中，我们需要判断当前日期是否在 `dates` 数组中，如果在，则添加小圆点；如果不在，则不添加。

希望以上代码对你有所帮助！