<template>
<el-date-picker
v-model="value2"
align="right"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions"
/>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
cellClassName: date => {
const day = new Date(date).getDate();
return day % 2 === 0 ? 'datepickFail' : 'datepickSuccess'
},
}
}
}
}
</script>
<style>
.datepickSuccess::after {
display: block;
color: green;
content: "成功";
}
.datepickFail::after {
display: block;
color: red;
content: "失败";
}
</style>
原理:利用css伪元素添加文字,效果如下