mirror of
https://github.com/continew-org/continew-admin-ui.git
synced 2025-10-25 18: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