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

你可以通过以下CSS代码实现这个效果：

.el-date-picker__editor-wrap li:hover::before,
.el-date-picker__editor-wrap li.selected::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: blue;
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.el-date-picker__editor-wrap li.has-range:hover::before,
.el-date-picker__editor-wrap li.has-range.selected::before {
  bottom: -16px;
}

然后在组件中传入dates数组，并在日期下拉框中对应的日期li元素上添加`has-range`类名即可：

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

data() {
  return {
    pickerOptions: {
      disabledDate: (time) => {
        const date = new Date(time.getTime())
        date.setHours(0, 0, 0, 0)
        return this.dates.indexOf(date.toISOString().slice(0, 10)) === -1
      }
    },
    dates: ["2023-05-23", "2023-05-22", "2023-05-19"]
  }
},
mounted() {
  const lis = document.querySelectorAll('.el-date-picker__editor-wrap li')
  lis.forEach(li => {
    const date = li.getAttribute('aria-label')
    if (this.dates.indexOf(date) !== -1) {
      li.classList.add('has-range')
    }
  })
}

这里的代码中，我们在`disabledDate`函数中判断日期是否在`dates`数组中，如果不在则禁用该日期，如果在则不禁用。然后在组件挂载后，我们遍历日期下拉框中的所有日期li元素，如果对应的日期在`dates`数组中，则在该li元素上添加`has-range`类名，这个类名在CSS中用于控制添加小圆点的样式。