DyForm 动态表单组件

该组件用于生成动态表单，可以根据传入的配置项渲染不同的表单项。

示例

<DyForm
labelWidth="100px"
labelPosition="left"
ref='formRef'
v-model:formData="formData"
:formItemProps="formItemProps"
:inLine="false"
/>
<el-button @click="valid" type='primary'>提交

<template>
  <Layout>
    <DyForm
      labelWidth="100px"
      labelPosition="left"
      ref="formRef"
      v-model:formData="formData"
      :formItemProps="formItemProps"
      :inLine="false"
    />
    <el-button @click="valid" type="primary">提交</el-button>
    />
  </Layout>
</template>

<script setup>
import { ref } from 'vue'
import DyForm from '@/components/DyForm/DyForm.tsx'

const formRef = ref()
const formData = ref({})
const formItemProps = ref([
  {
    label: '姓名',
    prop: 'name',
    el: 'input',
    placeholder: '请输入姓名',
    rules: [{ required: true, message: '姓名', trigger: 'blur' }],
  },
  {
    label: '编码',
    prop: 'code',
    el: 'input',
    placeholder: '请输入编码',
    rules: [
      { required: true, message: '不能为空或空白字符！', trigger: 'blur' },
    ],
  },
    {
    label: '地址',
    prop: 'addr',
    el: 'select',
    placeholder: '请选择',
    options: [{
      label: 'xxx'
      value: '222'
    }]

  },
])

const handleUpdateFormData = (data) => {
  console.log('表单数据已更新:', data)
}

const valid = () => {
  formRef.value?.validate()
}
</script>

在该示例中，DyForm 组件被使用，并通过属性传递了表单数据对象 formData 和表单项配置数组 formItemProps。当表单数据对象发生改变时，触发 update:formData 事件，调用 handleUpdateFormData 方法更新表单数据。

属性

属性名	类型	默认值	必填	描述
labelWidth	String	'100px'	否	表单项标签宽度
labelPosition	String	'left'	否	表单项标签位置
formData	Object	{}	否	表单数据对象
formItemProps	Array	[]	否	表单项配置数组
inLine	Boolean	false	否	是否为行内表单布局

表单项配置属性（formItemProps）

属性名	类型	默认值	必填	描述

方法

方法名	参数	返回值	描述