vxe-table vxe-input vue 日期选择组件带农历节日、小圆点提醒
默认的日期选择是没有节日信息的
在这里插入图片描述
可以通过 festival-method 方法自定义节日信息,接收一个对象,用于渲染当前的事件,例如:

{
	// ...
	methods: {
		// ...
		festivalMethod ({ date }) {
			const dateMaps = {
				20200801: {
					important: true, // 是否标记为重要节日
					label: '建军节', // 显示节日名称
					extra: {
						label: '休' // 右上角额外显示的事件名称
					}
				},
				20200812: {
					notice: true // 显示小圆点事件通知
				},
				20201001: {
					important: true,
					label: '国庆节,中秋节', // 如果同一天拥有多个节日重叠,用逗号分开
					extra: {
						important: true, // 是否标记为重要事件
						label: '班'
					}
				}
			}
			const ymd = XEUtils.toDateString(date, 'yyyyMMdd')
			return dateMaps[ymd] || { label: '无' }
		}
	}
}

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐