Element Ui中DatePicker 组件在日期下面添加文字

<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伪元素添加文字,效果如下