威海外贸网站建设怎么样,郴州网站建设设计,为企网站,南充网站建设有哪些问题#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
