基于antd的动态表单

基于antd的动态表单

增加代码可读性便于维护
建议实现简单的表单效果 例如：两行左右布局 效果

根据数据来源for循环出表单内容

 <a-form
      :model="form"
      :rules="formRules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item
        v-for="(item,index) in relationForm"
        :key="index"
        :name="item.name"
        :label="item.label"
      >
      <template v-if="item.type === 'select'">
        <Select
          v-bind="item.bind || {}"
          :customType="'type'"
          style="width: 412px"
          v-model:value="form[item.key]"
        />
      </template>
      <template v-else-if="item.type === 'input'">
        <a-input
          v-model:value="form[item.key]"
          style="width: 412px"
          v-bind="item.bind || {}"
        />
      </template>
      </a-form-item>
    </a-form>

驱动数据
bind 里面可以引用组件使用的参数

const form = ref([])

const relationForm = ref([
  {
    type: 'select',
    label: '类型',
    value: '',
    bind: {
      placeholder: '请选择类型'
    },
    key: 'typeName',
    name: 'typeName'
  },
  {
    type: 'input',
    label: '名称',
    value: '',
    bind: {
      placeholder: '请输入名称'
    },
    key: 'name',
    name: 'name'
  },
  {
    type: 'input',
    label: '版本',
    value: '',
    bind: {
      placeholder: '请输入版本'
    },
    key: 'version',
    name: 'version'
  }
])

const formRules = reactive({
  name: [
    { required: true, message: '名称不能为空', trigger: 'blur' }
  ],
  version: [
    { required: true, message: '版本不能为空', trigger: 'blur' }
  ]
})