mirror of
				https://github.com/continew-org/continew-admin-ui.git
				synced 2025-10-31 22:57:15 +08:00 
			
		
		
		
	feat: GiForm 支持 label 自定义渲染,以及插槽自定义渲染(同步 GiDemo 更新)
This commit is contained in:
		| @@ -7,9 +7,13 @@ | |||||||
|           :span="item.span || options.gridItem?.span" |           :span="item.span || options.gridItem?.span" | ||||||
|         > |         > | ||||||
|           <a-form-item |           <a-form-item | ||||||
|             v-bind="item.formItemProps" :label="item.label" :field="item.field" :rules="item.rules" |             v-bind="item.formItemProps" :field="item.field" :rules="item.rules" | ||||||
|             :disabled="isDisabled(item.disabled)" |             :disabled="isDisabled(item.disabled)" | ||||||
|           > |           > | ||||||
|  |             <template #label> | ||||||
|  |               <template v-if="typeof item.label === 'string'">{{ item.label }}</template> | ||||||
|  |               <component :is="item.label" v-else></component> | ||||||
|  |             </template> | ||||||
|             <slot |             <slot | ||||||
|               v-if="!['group-title'].includes(item.type || '')" :name="item.field" |               v-if="!['group-title'].includes(item.type || '')" :name="item.field" | ||||||
|               v-bind="{ disabled: isDisabled(item.disabled) }" |               v-bind="{ disabled: isDisabled(item.disabled) }" | ||||||
| @@ -25,7 +29,12 @@ | |||||||
|                 :is="`a-${item.type}`" v-else v-bind="getComponentBindProps(item)" |                 :is="`a-${item.type}`" v-else v-bind="getComponentBindProps(item)" | ||||||
|                 :model-value="modelValue[item.field as keyof typeof modelValue]" |                 :model-value="modelValue[item.field as keyof typeof modelValue]" | ||||||
|                 @update:model-value="valueChange($event, item.field)" |                 @update:model-value="valueChange($event, item.field)" | ||||||
|               ></component> |               > | ||||||
|  |                 <template v-for="(slotValue, slotKey) in item?.slots" :key="slotKey" #[slotKey]> | ||||||
|  |                   <template v-if="typeof slotValue === 'string'">{{ slotValue }}</template> | ||||||
|  |                   <component :is="slotValue" v-else></component> | ||||||
|  |                 </template> | ||||||
|  |               </component> | ||||||
|             </slot> |             </slot> | ||||||
|             <slot v-else name="group-title"> |             <slot v-else name="group-title"> | ||||||
|               <a-alert v-bind="item.props">{{ item.label }}</a-alert> |               <a-alert v-bind="item.props">{{ item.label }}</a-alert> | ||||||
|   | |||||||
| @@ -1,4 +1,5 @@ | |||||||
| import type * as A from '@arco-design/web-vue' | import type * as A from '@arco-design/web-vue' | ||||||
|  | import type { VNode } from 'vue' | ||||||
|  |  | ||||||
| export type FormType = | export type FormType = | ||||||
|   | 'input' |   | 'input' | ||||||
| @@ -69,7 +70,7 @@ export type ColumnsItemOptionsOrData = | |||||||
|  |  | ||||||
| export interface ColumnsItem<F = any> { | export interface ColumnsItem<F = any> { | ||||||
|   type?: FormType // 类型 |   type?: FormType // 类型 | ||||||
|   label?: A.FormItemInstance['label'] // 标签 |   label?: A.FormItemInstance['label'] | (() => VNode) // 标签 | ||||||
|   field: A.FormItemInstance['field'] // 字段(必须唯一) |   field: A.FormItemInstance['field'] // 字段(必须唯一) | ||||||
|   gridItemProps?: A.GridItemProps |   gridItemProps?: A.GridItemProps | ||||||
|   formItemProps?: Omit<A.FormItemInstance['$props'], 'label' | 'field'> // a-form-item的props |   formItemProps?: Omit<A.FormItemInstance['$props'], 'label' | 'field'> // a-form-item的props | ||||||
| @@ -106,6 +107,8 @@ export interface ColumnsItem<F = any> { | |||||||
|   resultFormat?: ColumnsItemFormat // 结果集格式化 |   resultFormat?: ColumnsItemFormat // 结果集格式化 | ||||||
|   init?: boolean // 初始化请求 |   init?: boolean // 初始化请求 | ||||||
|   cascader?: string[] // 级联的field字段列表 |   cascader?: string[] // 级联的field字段列表 | ||||||
|  |   slots?: Partial<Record<'prepend' | 'append' | 'suffix' | 'prefix', string | (() => VNode)>> | ||||||
|  |   formItemSlots?: Partial<Record<'help' | 'extra', string | (() => VNode)>> | ||||||
| } | } | ||||||
|  |  | ||||||
| export interface Options { | export interface Options { | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user