Fixform item

components/form/FormItem.tsx

@@ -102,6 +102,7 @@ export const formItemProps = () => ({
   messageVariables: { type: Object as PropType<Record<string, string>> },
   hidden: Boolean,
   noStyle: Boolean,
+  disabled: Boolean,
 });
 
 export type FormItemProps = Partial<ExtractPropTypes<ReturnType<typeof formItemProps>>>;
@@ -250,7 +251,9 @@ export default defineComponent({
       );
       validateState.value = 'validating';
       errors.value = [];
-
+      if (props.disabled) {
+        return Promise.resolve();
+      }
       promise
         .catch(e => e)
         .then((results: RuleError[] = []) => {
@@ -408,6 +411,8 @@ export default defineComponent({
           v-slots={{
             default: () => (
               <>
+                {/* disable */}
+                {props.disabled ? <div class={[`${prefixCls.value}-item-disabled`]}></div> : ''}
                 {/* Label */}
                 <FormItemLabel
                   {...props}

components/form/index.en-US.md

@@ -75,6 +75,7 @@ A form consists of one or more form fields whose type includes input, textarea,
 | --- | --- | --- | --- | --- |
 | autoLink | Whether to automatically associate form fields. In most cases, you can use automatic association. If the conditions for automatic association are not met, you can manually associate them. See the notes below. | boolean | true |  |
 | colon | Used with `label`, whether to display `:` after label text. | boolean | true |  |
+| disabled | Whether to disable Item and skip rule verification | boolean | false |  |
 | extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string\|slot |  |  |
 | hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false |  |
 | help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|slot |  |  |

components/form/index.zh-CN.md

@@ -76,6 +76,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
 | --- | --- | --- | --- | --- |
 | autoLink | 是否自动关联表单域，对于大部分情况都可以使用自动关联，如果不满足自动关联的条件，可以手动关联，参见下方注意事项 | boolean | true |  |
 | colon | 配合 label 属性使用，表示是否显示 label 后面的冒号 | boolean | true |  |
+| disabled | 是否禁用 Item 并跳过 rule 验证 | boolean | false |  |
 | extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string\|slot |  |  |
 | hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false |  |
 | help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|slot |  |  |

components/form/style/index.less

@@ -59,7 +59,7 @@
 // ================================================================
 .@{form-item-prefix-cls} {
   .reset-component();
-
+  position: relative;
   margin-bottom: @form-item-margin-bottom;
   vertical-align: top;
 
@@ -74,6 +74,16 @@
     display: none;
   }
 
+  &-disabled {
+    //https://github.com/vueComponent/ant-design-vue/issues/6374
+    .disabled();
+    width: 100%;
+    height: 100%;
+    z-index: 99;
+    position: absolute;
+    background: none;
+  }
+
   // ==============================================================
   // =                            Label                           =
   // ==============================================================
@@ -110,7 +120,9 @@
       }
 
       // Required mark
-      &.@{form-item-prefix-cls}-required:not(.@{form-item-prefix-cls}-required-mark-optional)::before {
+      &.@{form-item-prefix-cls}-required:not(
+          .@{form-item-prefix-cls}-required-mark-optional
+        )::before {
         display: inline-block;
         margin-right: 4px;
         color: @label-required-color;