我现在想实现一个功能，重新封装el-date-picker组件，根据服务器获取到的数据，修改el-date-picker的样式，当请求接口，后端服务器会返回若干日期（例如,dates: ["2023-05-23", "2023-05-22", "2023-05-19"],），我希望在获取这些日期时，对el-date-picker的日期下拉框添加现实效果并回显，在数据包含的日期下面添加一个提示作用的小蓝点，请给出代码实例

你可以使用 `cell-style` 和 `disabled-date` 属性来实现此功能。具体步骤如下：

1. 在获取到服务器返回的日期数据后，将其存储在一个数组中，比如 `disabledDates`。

2. 在 `el-date-picker` 中使用 `cell-style` 属性来设置单元格的样式，同时使用 `disabled-date` 属性来禁用 `disabledDates` 数组中的日期。

代码示例：

<template>
  <el-date-picker
    v-model="date"
    type="date"
    :cell-style="cellStyle"
    :disabled-date="disabledDate"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      date: '',
      disabledDates: ["2023-05-23", "2023-05-22", "2023-05-19"]
    }
  },
  methods: {
    // 禁用日期
    disabledDate(date) {
      return this.disabledDates.indexOf(this.formatDate(date)) !== -1;
    },
    // 设置单元格样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      const date = this.formatDate(row[column.property]);
      if (this.disabledDates.indexOf(date) !== -1) {
        return { backgroundColor: '#f5f5f5' };
      }
      return {};
    },
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      return `${year}-${month}-${day}`;
    }
  }
}
</script>

3. 在 `cellStyle` 方法中，判断当前单元格对应的日期是否在 `disabledDates` 数组中，如果是，则返回一个包含背景色的样式对象，这里我设置的是灰色背景色。

4. 在 `disabledDate` 方法中，判断传入的日期是否在 `disabledDates` 数组中，如果是，则返回 `true`，表示禁用该日期。

5. 为了能够在日期下面添加小蓝点的提示，你可以在 `cellStyle` 方法中，根据 `disabledDates` 数组中的日期来判断是否需要添加提示。如果需要，可以在单元格右下角添加一个蓝色的小圆点，可以通过给单元格添加一个 `div` 元素来实现。

代码示例：

cellStyle({ row, column, rowIndex, columnIndex }) {
  const date = this.formatDate(row[column.property]);
  if (this.disabledDates.indexOf(date) !== -1) {
    return { backgroundColor: '#f5f5f5' };
  }
  if (this.disabledDates.indexOf(date) === -1) {
    return {
      position: 'relative',
      '&::after': {
        content: '""',
        position: 'absolute',
        bottom: '-2px',
        right: '-2px',
        width: '6px',
        height: '6px',
        borderRadius: '50%',
        backgroundColor: '#0084ff'
      }
    }
  }
  return {};
},

这段代码使用了 CSS 的伪元素 `::after`，同时通过 `position: relative` 让其相对于单元格进行定位，最后通过设置 `bottom` 和 `right` 属性来调整其位置。