CondorFormItem
CondorFormItem 是一个动态表单项渲染组件,根据 column.component.name 自动映射到对应的表单控件。支持 Naive UI 原生组件和所有 Condor 自定义组件的自动切换。
组件 Props
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| column | Condor.Search.Column | - | 必需 列配置对象,需包含 component.name |
| value | any | - | 当前字段的值(v-model) |
组件事件
| 事件名 | 说明 | 参数 |
|---|---|---|
| update:value | 字段值变化时触发 | 更新后的值 |
支持的组件映射
component.name 取值与渲染组件的对应关系:
| name | 渲染组件 |
|---|---|
n-input | NInput |
n-input-number | NInputNumber |
n-auto-complete | NAutoComplete |
n-cascader | NCascader |
n-color-picker | NColorPicker |
n-checkbox-group | NCheckboxGroup |
n-date-picker | NDatePicker |
n-dynamic-input | NDynamicInput |
n-dynamic-tags | NDynamicTags |
n-input-otp | NInputOtp |
n-radio-group | NRadioGroup |
n-select | NSelect |
n-slider | NSlider |
n-switch | NSwitch |
n-time-picker | NTimePicker |
n-tree-select | NTreeSelect |
condor-array | CondorArray |
condor-select | CondorSelect |
condor-tree-check | CondorTreeCheck |
condor-tree-select | CondorTreeSelect |
condor-dict-radio | CondorDictRadio |
condor-dict-select | CondorDictSelect |
condor-dict-checkbox | CondorDictCheckbox |
condor-upload | CondorUpload |
condor-editor | CondorEditor |
未匹配时默认使用 NInput。
基本用法
CondorFormItem 通常不作为独立组件使用,而是在 CondorSearch 或 CondorLayerForm 内部自动调用。配置方式通过 column.component 指定:
ts
const columns = [
{
key: 'name',
title: '名称',
component: {
name: 'n-input',
props: { maxlength: 50 }
}
},
{
key: 'category',
title: '分类',
component: {
name: 'condor-dict-select',
props: { code: 'category' }
}
},
{
key: 'status',
title: '状态',
component: {
name: 'n-switch'
}
}
];