Skip to content

CondorFormItem

CondorFormItem 是一个动态表单项渲染组件,根据 column.component.name 自动映射到对应的表单控件。支持 Naive UI 原生组件和所有 Condor 自定义组件的自动切换。

组件 Props

参数名类型默认值说明
columnCondor.Search.Column-必需 列配置对象,需包含 component.name
valueany-当前字段的值(v-model)

组件事件

事件名说明参数
update:value字段值变化时触发更新后的值

支持的组件映射

component.name 取值与渲染组件的对应关系:

name渲染组件
n-inputNInput
n-input-numberNInputNumber
n-auto-completeNAutoComplete
n-cascaderNCascader
n-color-pickerNColorPicker
n-checkbox-groupNCheckboxGroup
n-date-pickerNDatePicker
n-dynamic-inputNDynamicInput
n-dynamic-tagsNDynamicTags
n-input-otpNInputOtp
n-radio-groupNRadioGroup
n-selectNSelect
n-sliderNSlider
n-switchNSwitch
n-time-pickerNTimePicker
n-tree-selectNTreeSelect
condor-arrayCondorArray
condor-selectCondorSelect
condor-tree-checkCondorTreeCheck
condor-tree-selectCondorTreeSelect
condor-dict-radioCondorDictRadio
condor-dict-selectCondorDictSelect
condor-dict-checkboxCondorDictCheckbox
condor-uploadCondorUpload
condor-editorCondorEditor

未匹配时默认使用 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'
    }
  }
];