网站建设与维护作业,企业网站建设制作公司哪家好,深圳装饰装修公司,竣工验收备案查询问题#xff1a; 按照官网上的自定义内容示例#xff0c;修改日期选择器没有问题#xff0c;如果修改日期范围选择器#xff0c;修改后会丢失日期范围选择时的样式。
解决#xff1a; 从F12中不难看出日期范围的选择样式来自于.el-date-table-cell 而示例中写的是.cell 按照官网上的自定义内容示例修改日期选择器没有问题如果修改日期范围选择器修改后会丢失日期范围选择时的样式。
解决 从F12中不难看出日期范围的选择样式来自于.el-date-table-cell 而示例中写的是.cell所以只需改一下class再在示例代码的基础上稍作修改就可以了 附示例代码
templateel-date-pickerv-modelvaluetypedaterangestart-placeholderStart Dateend-placeholderEnd Date:default-value[new Date(2021, 10, 1), new Date(2021, 11, 1)]template #defaultcelldiv classel-date-table-cell :class{ current: cell.isCurrent }span classel-date-table-cell__text{{ cell.text }}/spanspan v-ifisHoliday(cell) classholiday//div/template/el-date-picker
/templatescript langts setup
import {ref} from vueconst value ref()const holidays [2021-10-01,2021-10-02,2021-10-03,2021-10-04,2021-10-05,2021-10-06,2021-10-07,
]const isHoliday ({dayjs}) {return holidays.includes(dayjs.format(YYYY-MM-DD))
}/script
style scoped
.holiday {position: absolute;width: 6px;height: 6px;background: var(--el-color-danger);border-radius: 50%;bottom: 0;left: 50%;transform: translateX(-50%);
}
/style
