mirror of
				https://github.com/continew-org/continew-admin-ui.git
				synced 2025-11-04 08:59:22 +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