对el-date-picker组件的日期框做过滤，（过滤条件是和数组中相等的日期）将符合条件的日期单元格的父元素过滤出来，并改变其背景色

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

<template>
  <el-date-picker
    v-model="selectedDate"
    type="date"
    @change="filterDates"
  ></el-date-picker>
  <table>
    <tbody>
      <tr v-for="(date, index) in dates" :key="index">
        <td :class="{ 'highlighted-date': highlightedDates.includes(date) }">
          {{ date }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null, // 存储选中的日期
      dates: [], // 存储所有的日期
      highlightedDates: [], // 存储符合条件的日期
    };
  },
  methods: {
    filterDates() {
      // 过滤出符合条件的日期
      this.highlightedDates = this.dates.filter(
        (date) => date === this.selectedDate
      );
    },
  },
  created() {
    // 在组件创建时初始化日期数组
    for (let i = 1; i <= 31; i++) {
      this.dates.push(`2022-01-${i.toString().padStart(2, '0')}`);
    }
  },
};
</script>

<style>
.highlighted-date {
  background-color: yellow;
}
</style>

这段代码中，我们使用了 `el-date-picker` 组件来选择日期，并在其 `change` 事件中调用 `filterDates` 方法来过滤出符合条件的日期。过滤后，我们将符合条件的日期存储在 `highlightedDates` 数组中，并在模板中使用 `v-bind:class` 来动态绑定单元格的样式，以此来改变其背景色。其中，我们使用了 `.highlighted-date` 类来定义符合条件的日期单元格的背景色。

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