el-date-picker组件的disabled-date属性怎么使用

el-date-picker 组件的 disabled-date 属性用于指定哪些日期是禁用的，即不可选取的。它可以是一个函数或者一个日期数组。

如果使用函数，在函数中需要返回一个布尔值来表示当前日期是否被禁用。例如：

<template>
  <div>
    <el-date-picker v-model="date" :disabled-date="disabledDate"></el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: ''
    }
  },
  methods: {
    disabledDate(time) {
      // 在这里判断 time 是否被禁用，返回 true 表示禁用，false 表示可选
      return time.getTime() > Date.now();
    }
  }
}
</script>

在上面的例子中，disabledDate 函数会被调用多次，每次传入一个时间对象作为参数。我们可以根据自己的需求来决定哪些日期是禁用的。上述例子中，我们简单地通过比较时间戳判断时间是否超过当前时间来禁用未来的日期。

另外，disabled-date 还支持接收一个日期数组来指定禁用的日期，例如：

<template>
  <div>
    <el-date-picker v-model="date" :disabled-date="disabledDates"></el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: '',
      disabledDates: ['2021-01-01', '2022-12-25'] // 禁用 2021-01-01 和 2022-12-25
    }
  }
}
</script>

在上面的例子中，我们通过将禁用日期以字符串形式放入 disabledDates 数组来指定禁用的日期。

可能会有疑问：为什么要使用 disabled-date 属性来禁用日期？而不是直接在模板中渲染时判断日期是否被禁用？
答：使用 disabled-date 属性可以更灵活地控制哪些日期是禁用的。当需要根据特定条件或逻辑动态决定日期是否可选时，使用 disabled-date 可以提供更好的扩展性和可维护性。另外，在功能复杂的场景下，直接在模板中进行判断可能会导致代码混乱，使用 disabled-date 属性能够更清晰地分离逻辑。

相关问题：
1. el-date-picker 组件还有哪些常用属性？
2. 如何自定义 el-date-picker 的样式？
3. 如何设置 el-date-picker 默认选中的日期？
4. 如何监听 el-date-picker 组件的值变化并触发相应的操作？