表单组件 - IkFormList

构建表单的组件，通过配置表单的label、value、type等属性，快速构建表单。

props

props	类型	说明	默认值
formList	Array	表单项的配置数据,由多个 ItemForm 组成	[]
ItemForm.key	String	表单绑定的值	''
ItemForm.type	String	表单显示的类型	true
ItemForm.span	number	动画时间	6
ItemForm.label	String	标签	''
ItemForm.labelWidth	String	标签显示的宽度	'60px'
ItemForm.slotName	String	插槽 处理特殊需求的	""
ItemForm.options	Array	拉下，单选框，多选框 的渲染数据	''
ItemForm.optionsValue	String	自定义的key	""
ItemForm.optionsLabel	String	自定义标签	""
ItemForm.defaultData	Any	表单要绑定的默认值	""
ItemForm.props	Object	element自带的属性、事件
formRules	Array	表单项的校验规则	[]

defineExpose

defineExpose	说明
formData	表单数据值（在父组件通过ref获取）

示例代码

<script lang="ts" setup>
// 表单校验规则
const formRules = {
  name: [
    { required: true, message: '请输入活动名称', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  ],
  region: [
    { required: true, message: '请选择活动区域', trigger: 'change' }
  ],
  type: [
    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
  ],
  resource: [
    { required: true, message: '请选择活动资源', trigger: 'change' }
  ],
  desc: [
    { required: true, message: '请填写活动形式', trigger: 'blur' }
  ]
}

// 表单项列表
const formList = [
  {
    type: 'el-input',
    label: '活动名称',
    key: 'name',
    span: 12,
    labelWidth: '100px',
    props: {
      clearable: true,
      placeholder: '请输入活动名称'
    }
  },
  {
    type: 'el-select',
    label: '活动区域',
    key: 'region',
    span: 12,
    labelWidth: '100px',
    props: {
      placeholder: '请选择活动区域',
      clearable: true
    },
    options: [
      { label: '区域一', value: 'shanghai' },
      { label: '区域二', value: 'beijing' }
    ]
  },
  {
    type: 'el-date-picker',
    label: '活动时间',
    key: 'date1',
    span: 12,
    labelWidth: '100px',
    props: {
      placeholder: '请选择活动时间',
      clearable: true,
      type: 'daterange'
    }
  },
  {
    slotName: 'delivery',
    label: '及时配送',
    key: 'delivery',
    labelWidth: '100px',
    defaultData: false,
    span: 24
  },
  {
    type: 'el-checkbox',
    label: '活动性质',
    key: 'type',
    defaultData: [],
    span: 24,
    labelWidth: '100px',
    options: [
      { label: '美食/餐厅线上活动', value: '1' },
      { label: '地推活动', value: '2' },
      { label: '线下主题活动', value: '3' },
      { label: '单纯品牌曝光', value: '4' }
    ]
  },
  {
    type: 'el-radio',
    label: '特殊资源',
    key: 'resource',
    span: 24,
    labelWidth: '100px',
    options: [
      { label: '线上品牌商赞助', value: '1' },
      { label: '线下场地免费', value: '2' }
    ]
  },
  {
    type: 'el-input',
    label: '活动形式',
    key: 'desc',
    span: 24,
    labelWidth: '100px',
    props: {
      type: 'textarea',
      clearable: true,
      placeholder: '请填写活动形式'
    }
  }
]

// 表单Ref
const formRef = ref()
// 表单数据
const formFata = ref({})

onMounted(() => {
  formFata.value = formRef.value.formData
})
</script>

<template>
  <IkPageMain fixed style="padding: 16px; box-sizing: border-box">
    <IkFormList ref="formRef" style="width: 750px" :form-list="formList" :form-rules="formRules">
      <template #delivery>
        <el-switch
          v-model="formFata.delivery"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </template>
    </IkFormList>
  </IkPageMain>
</template>