如何为年月筛选器设置单年选两月规则及单月选中告警提示

完全可以实现你需要的选择限制+消息告警需求，具体方案如下：

基础选择规则配置 #

• 年份仅支持单选，禁止同时选中多个年份
• 未选中任意年份时，所有月份选项默认置灰不可操作
• 选中某一年份后，仅开放该年份对应月份的选择权限，其他年份的月份保持不可选状态
• 选中的月份需属于同一个已选年份，不支持跨年份选择月份

告警功能实现逻辑 #

在用户每次点击年份/月份选项完成选择操作后，触发一次规则校验，判断逻辑如下：

1. 首先判断是否存在已选中的年份，无选中年份时无需触发该告警
2. 统计当前已选年份下的选中月份数量：
   • 数量为1时，弹出提示 您需要选择两个月份
   • 数量为2时，自动隐藏提示，同时禁用同一年份下剩余未选中的月份，避免用户多选
   • 取消选中月份后剩余数量回到1时，重新触发提示

前端实现参考代码（JS示例） #

// 选择操作回调函数
function onSelectionChange() {
  // 获取已选中的年份
  const checkedYear = document.querySelector('.year-item:checked')?.value
  if (!checkedYear) return
  // 统计对应年份下的已选月份数
  const checkedMonthCount = document.querySelectorAll(`.month-item[data-year="${checkedYear}"]:checked`).length
  // 触发告警判断
  if (checkedMonthCount === 1) {
    // 可替换为自定义toast提示，体验更流畅
    alert('您需要选择两个月份')
  }
}

交互优化建议 #

• 切换选中年份时，自动清空上一个年份的所有月份选中状态，避免出现跨年月选中的异常情况
• 选中2个月份后自动锁定同一年份下其他月份，减少用户误操作
• 告警提示优先使用页面内轻量toast组件，替代原生alert避免打断用户操作流程

内容的提问来源于stack exchange，提问作者user9517769