perf(component): formItem: label支持函数渲染 (#3504)

* perf(component): formItem: label支持函数渲染

(cherry picked from commit abd6e2b1298712e58cc69cdaa55f44e3393b71a5)

* perf(component): formItem: label支持函数渲染

* feat(component): formItem: label支持函数渲染

* perf(component): formItem: label支持函数渲染

(cherry picked from commit abd6e2b1298712e58cc69cdaa55f44e3393b71a5)

perf(component): formItem: label支持函数渲染

feat(component): formItem: label支持函数渲染

* chore: update label type

---------

Co-authored-by: likui628 <90845831+likui628@users.noreply.github.com>

src/components/Form/src/components/FormItem.vue

@@ -159,7 +159,6 @@
         isShow = isShow && itemIsAdvanced;
         return { isShow, isIfShow };
       }
-
       function handleRules(): ValidationRule[] {
         const {
           rules: defRules = [],
@@ -179,7 +178,7 @@
         const joinLabel = Reflect.has(props.schema, 'rulesMessageJoinLabel')
           ? rulesMessageJoinLabel
           : globalRulesMessageJoinLabel;
-        const assertLabel = joinLabel ? label : '';
+        const assertLabel = joinLabel ? (isFunction(label) ? '' : label) : '';
         const defaultMsg = component
           ? createPlaceholderMessage(component) + assertLabel
           : assertLabel;
@@ -337,12 +336,13 @@
 
       function renderLabelHelpMessage() {
         const { label, helpMessage, helpComponentProps, subLabel } = props.schema;
+        const getLabel = isFunction(label) ? label(unref(getValues)) : label;
         const renderLabel = subLabel ? (
           <span>
-            {label} <span class="text-secondary">{subLabel}</span>
+            {getLabel} <span class="text-secondary">{subLabel}</span>
           </span>
         ) : (
-          label
+          getLabel
         );
         const getHelpMessage = isFunction(helpMessage)
           ? helpMessage(unref(getValues))
@@ -385,8 +385,8 @@
             return slot
               ? getSlot(slots, slot, unref(getValues), opts)
               : render
-                ? render(unref(getValues), opts)
-                : renderComponent();
+              ? render(unref(getValues), opts)
+              : renderComponent();
           };
 
           const showSuffix = !!suffix;
@@ -437,8 +437,8 @@
           return colSlot
             ? getSlot(slots, colSlot, values, opts)
             : renderColContent
-              ? renderColContent(values, opts)
-              : renderItem();
+            ? renderColContent(values, opts)
+            : renderItem();
         };
 
         return (

src/components/Form/src/types/form.ts

@@ -140,7 +140,7 @@ interface BaseFormSchema<T extends ComponentType = any> {
   // Variable name bound to v-model Default value
   valueField?: string;
   // Label name
-  label?: string | VNode;
+  label?: string | VNode | ((renderCallbackParams: RenderCallbackParams) => string | VNode);
   // Auxiliary text
   subLabel?: string;
   // Help text on the right side of the text

src/views/demo/form/index.vue

@@ -152,7 +152,9 @@
     {
       field: 'field1',
       component: 'Input',
-      label: '字段1',
+      label: ({ model }) => {
+        return `字段1${model.field3 ? model.field3 : ''}`;
+      },
 
       colProps: {
         span: 8,