feat(cl-form-item): 支持根据规则自动判断必填状态

- 修改 required 属性类型为 Boolean | null,默认值为 null
- 引入 getRule 方法用于获取表单字段规则
- 新增计算属性 required,优先使用 props.required,否则根据规则判断
- 更新 showAsterisk 和 showMessage 计算逻辑,依赖新的 required 状态
- 修改 watch 监听对象为计算后的 required 属性
This commit is contained in:
haibiao_gu
2025-11-04 11:58:34 +08:00
parent 33e59242c0
commit 53402579bf

View File

@@ -109,13 +109,13 @@ const props = defineProps({
}, },
// 是否必填 // 是否必填
required: { required: {
type: Boolean, type: Boolean as PropType<boolean | null>,
default: false default: null
} }
}); });
// cl-form 上下文 // cl-form 上下文
const { formRef, getError, getValue, validateField, addField, removeField, setRule } = useForm(); const { formRef, getError, getValue, validateField, addField, removeField, setRule, getRule } = useForm();
// 透传样式类型 // 透传样式类型
type PassThrough = { type PassThrough = {
@@ -149,9 +149,20 @@ const labelWidth = computed<string>(() => {
return props.labelWidth ?? formRef.value?.labelWidth ?? "120rpx"; return props.labelWidth ?? formRef.value?.labelWidth ?? "120rpx";
}); });
// 计算是否必填
const required = computed<boolean>(() => {
if (props.required !== null && props.required !== undefined) {
return props.required;
}
// 否则,根据规则自动判断
const rules = getRule(props.prop);
return rules.some(rule => rule.required === true);
});
// 是否显示必填星号 // 是否显示必填星号
const showAsterisk = computed<boolean>(() => { const showAsterisk = computed<boolean>(() => {
if (!props.required) { if (!required.value) {
return false; return false;
} }
@@ -160,7 +171,7 @@ const showAsterisk = computed<boolean>(() => {
// 是否显示错误信息 // 是否显示错误信息
const showMessage = computed<boolean>(() => { const showMessage = computed<boolean>(() => {
if (!props.required) { if (!required.value) {
return false; return false;
} }
@@ -168,7 +179,7 @@ const showMessage = computed<boolean>(() => {
}); });
watch( watch(
computed(() => props.required), required, // 监听计算后的 required 属性
(val: boolean) => { (val: boolean) => {
if (val) { if (val) {
addField(props.prop, props.rules); addField(props.prop, props.rules);