vue3多个el-checkbox勾选框设置必选一个

背景：前端采用element的UI组件

1,用el-form-item包含el-checkbox，并在最左侧显示红色*标记

      <el-form-item label-width="0px"   prop="notificationGroup"><span style="color: #f56c6c; margin-right: 4px;">*</span><el-checkbox :disabled="showDetail" true-label="Y" false-label="N" v-model="form.sendSystemMessage">{{ $t('notice.waringMessage.sendSystemMessage') }}</el-checkbox><el-checkbox :disabled="showDetail"  true-label="Y" false-label="N" v-model="form.sendEmail">{{ $t('notice.waringMessage.sendEmail') }}</el-checkbox></el-form-item>

2，在data()下定义校验规则

  rules: {notificationGroup: [{ validator: this.validateAtLeastOne, trigger: 'change' }],}

3，在method下编写校验逻辑

    validateAtLeastOne(rule, value, callback) {const valid = this.form.sendSystemMessage === 'Y' ||this.form.sendEmail === 'Y';console.log("validateAtLeastOne ="+valid) ;   if (!valid) {callback(new Error("请勾选一项数据"));} else {callback();}callback();},