自定义表单项

DataForm 的表单项类型通过 type 字段指定，组件内部使用 Vue 的 resolveComponent 按名称查找已注册的组件。因此你可以创建任意自定义组件，全局注册后在 DataForm 中直接使用。

工作原理

FormItem 渲染时，通过如下方式查找组件：

const DyComponent = resolveComponent(props.type!)

然后将表单的 model 值和事件绑定到该组件上。因此只需两步：

1. 编写一个 Vue 组件，接收 modelValue / onUpdate:modelValue 进行双向绑定
2. 全局注册到应用中

组件协议

自定义表单项组件需要遵循以下接口：

属性/事件	类型	说明
modelValue	any	当前字段值（通过 valueKey 可自定义，默认 modelValue）
onUpdate:modelValue	(value: any) => void	值变更回调，触发后更新表单 model
itemField	string	当前字段名（通常用不到，由 FormItem 自动处理）
props (column.props)	any	列配置中的 props 透传到此组件的 props
events (column.events)	object	列配置中的 events 透传到此组件的事件

快速示例

1. 创建自定义组件

// components/CustomSlider.tsx
import { defineComponent } from 'vue'
import { ElSlider } from 'element-plus'

export default defineComponent({
  name: 'custom-slider',
  props: {
    modelValue: Number,
    min: { type: Number, default: 0 },
    max: { type: Number, default: 100 },
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    return () => (
      <ElSlider
        min={props.min}
        max={props.max}
        modelValue={props.modelValue}
        onUpdate:modelValue={(v) => emit('update:modelValue', v)}
      />
    )
  },
})

2. 全局注册

import CustomSlider from './components/CustomSlider'

app.component('custom-slider', CustomSlider)

3. 在 DataForm 中使用

const columns = [
  {
    field: 'rate',
    label: '评分',
    type: 'custom-slider',          // 对应全局注册的组件名
    props: { min: 0, max: 100 },    // 透传给 CustomSlider
  },
]

使用 events

通过 events 配置可以绑定组件的事件：

const columns = [
  {
    field: 'code',
    label: '输入框',
    type: 'el-input',
    events: {
      change: (value) => console.log('值变化', value),
      blur: () => console.log('失去焦点'),
    },
  },
]

事件名使用小写形式（如 change、blur、focus），内部自动转为 onChange、onBlur、onFocus。

使用 slots

通过 slots 配置可以传递插槽：

const columns = [
  {
    field: 'search',
    label: '搜索',
    type: 'el-input',
    slots: {
      prefix: () => <el-icon><Search /></el-icon>,
    },
  },
]

使用内置组件

DataForm 内置支持以下组件类型，直接使用 type 名称即可：

type	组件	说明
input-plus	InputPlus	增强输入（默认）
date-picker	DatePicker	日期选择器
file-upload	FileUpload	文件上传
data-picker	DataPicker	数据选择器
data-picker-table	DataPickerTable	表格选择器
el-input	Element Plus Input	原生输入框
el-switch	Element Plus Switch	开关
el-select	Element Plus Select	下拉选择
el-radio-group	Element Plus Radio	单选框组
el-checkbox-group	Element Plus Checkbox	复选框组
el-rate	Element Plus Rate	评分
el-slider	Element Plus Slider	滑块
el-input-number	Element Plus InputNumber	数字输入

所有 Element Plus 组件都可直接使用，因为它们已被全局注册。只需在 props 中传入对应组件的属性即可。