feat(Form): 支持配置单项的 disabled (#836)

WeBankFinTech · Jun 11, 2024 · aca726d · aca726d
1 parent 4598450
commit aca726d
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 39 deletions.
diff --git a/components/form/formItem.vue b/components/form/formItem.vue
@@ -32,7 +32,7 @@ import {
     ref,
 } from 'vue';
 import Schema from 'async-validator';
-import { cloneDeep, get, isArray, set } from 'lodash-es';
+import { cloneDeep, get, isArray, isNil, set } from 'lodash-es';
 import { pxfy } from '../_util/utils';
 import getPrefixCls from '../_util/getPrefixCls';
 import { FORM_ITEM_INJECTION_KEY } from '../_util/constants';
@@ -118,6 +118,14 @@ export default defineComponent({
                     : props.showMessage)
                     && validateStatus.value === VALIDATE_STATUS.ERROR,
         );
+        const formItemDisabled = computed(
+            () => {
+                if (!isNil(props.disabled)) {
+                    return props.disabled;
+                }
+                return disabled.value;
+            },
+        );
         const formItemRequired = computed(
             () =>
                 formItemRules.value.length > 0
@@ -272,7 +280,7 @@ export default defineComponent({
             isError: computed(() => {
                 return validateStatus.value === VALIDATE_STATUS.ERROR;
             }),
-            isFormDisabled: disabled,
+            isFormDisabled: formItemDisabled,
         });
 
         return {

diff --git a/components/form/interface.ts b/components/form/interface.ts
@@ -88,6 +88,10 @@ export const formItemProps = {
         type: Boolean as PropType<boolean | null>,
         default: null as boolean,
     },
+    disabled: {
+        type: Boolean as PropType<boolean | null | undefined>,
+        default: (): boolean | null | undefined => undefined,
+    },
     rules: {
         type: Array as PropType<FormRuleItem[]>,
         default: () => {

diff --git a/docs/.vitepress/components/form/disabled.vue b/docs/.vitepress/components/form/disabled.vue
@@ -3,12 +3,23 @@
         <FFormItem label="表单禁用:">
             <FSwitch v-model="formDisabled" />
         </FFormItem>
+        <FFormItem label="单项禁用:">
+            <FRadioGroup
+                v-model="formItemDisabled"
+                :cancelable="true"
+                :options="[
+                    { label: '禁用', value: true },
+                    { label: '不禁用', value: false },
+                ]"
+            />
+            （{{ String(formItemDisabled) }}）
+        </FFormItem>
     </FForm>
 
     <FDivider />
 
     <FForm :labelWidth="80" :disabled="formDisabled">
-        <FFormItem label="输入框">
+        <FFormItem label="输入框" :disabled="formItemDisabled">
             <FInput placeholder="请输入" />
         </FFormItem>
         <FFormItem label="文本输入">
@@ -80,45 +91,37 @@
     </FForm>
 </template>
 
-<script>
+<script setup>
 import { ref } from 'vue';
 
-export default {
-    setup() {
-        const formDisabled = ref(true);
-        const toggleVal = ref();
-        const numVal = ref(0);
-        const radioBtnVal = ref(0);
-        return {
-            optionList: [
-                {
-                    value: 'HuNan',
-                    label: '湖南',
-                },
-                {
-                    value: 'HuBei',
-                    label: '湖北',
-                },
-                {
-                    value: 'ZheJiang',
-                    label: '浙江',
-                },
-                {
-                    value: 'GuangDong',
-                    label: '广东',
-                },
-                {
-                    value: 'JiangSu',
-                    label: '江苏',
-                },
-            ],
-            toggleVal,
-            numVal,
-            formDisabled,
-            radioBtnVal,
-        };
+const formDisabled = ref(true);
+const formItemDisabled = ref();
+const toggleVal = ref();
+const numVal = ref(0);
+const radioBtnVal = ref(0);
+
+const optionList = [
+    {
+        value: 'HuNan',
+        label: '湖南',
+    },
+    {
+        value: 'HuBei',
+        label: '湖北',
+    },
+    {
+        value: 'ZheJiang',
+        label: '浙江',
+    },
+    {
+        value: 'GuangDong',
+        label: '广东',
+    },
+    {
+        value: 'JiangSu',
+        label: '江苏',
     },
-};
+];
 </script>
 
 <style scoped></style>