el-date-picker cell-class-name使用方法

el-date-picker 是 Element UI 中的日期选择器组件，而 cell-class-name 是其属性之一，用于设置日期单元格的样式类名。你可以使用 cell-class-name 来自定义日期单元格的样式。

使用方法如下：

1. 在 el-date-picker 组件中添加 cell-class-name 属性，值为一个函数。
2. 在函数中根据日期参数返回一个字符串，表示要应用于该日期单元格的样式类名。
3. 在样式表中定义对应的样式类。

示例代码：

<el-date-picker
  v-model="date"
  type="date"
  :cell-class-name="dateCellClassName"
></el-date-picker>

在 Vue 实例中定义 dateCellClassName 方法：

export default {
  data() {
    return {
      date: ''
    }
  },
  methods: {
    dateCellClassName(date) {
      // 根据日期参数返回样式类名
      if (date.getDay() === 0) {
        return 'weekend'; // 周日的单元格添加 weekend 样式类
      } else if (date.getDay() === 6) {
        return 'offday'; // 周六的单元格添加 offday 样式类
      }
      return ''; // 其他日期单元格不添加样式类
    }
  }
}

在样式表中定义样式类：

<style>
.weekend {
  background-color: yellow;
}

.offday {
  background-color: gray;
}
</style>

这样，el-date-picker 的日期单元格就会根据设置的样式类名来显示不同的样式了。在上面的示例中，周日的日期单元格会有黄色背景，周六的日期单元格会有灰色背景，其他日期单元格没有特殊样式。