vue如何实现动态表单

Vue 动态表单实现方法

数据驱动表单结构

通过 v-for 循环渲染表单项，绑定动态数据源。表单结构随数据变化自动更新。

<template>
  <form>
    <div v-for="(field, index) in formFields" :key="index">
      <label>{{ field.label }}</label>
      <input 
        v-model="field.value"
        :type="field.type"
        :placeholder="field.placeholder">
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formFields: [
        { label: '姓名', type: 'text', value: '', placeholder: '请输入姓名' },
        { label: '年龄', type: 'number', value: '', placeholder: '请输入年龄' }
      ]
    }
  }
}
</script>

动态添加/删除表单项

通过数组操作方法实现表单字段的增减控制。

methods: {
  addField() {
    this.formFields.push({
      label: '新字段',
      type: 'text',
      value: '',
      placeholder: '请输入内容'
    })
  },
  removeField(index) {
    this.formFields.splice(index, 1)
  }
}

表单验证处理

结合 vuelidate 或自定义验证逻辑实现动态验证规则。

import { required, minLength } from 'vuelidate/lib/validators'

export default {
  validations: {
    formFields: {
      $each: {
        value: {
          required,
          minLength: minLength(3)
        }
      }
    }
  }
}

动态表单组件化

将表单项封装为可复用的动态组件，支持更复杂的自定义配置。

<template>
  <component
    v-for="(field, index) in formFields"
    :key="index"
    :is="field.componentType"
    v-bind="field.props"
    v-model="field.value">
  </component>
</template>

服务端驱动表单配置

从后端获取表单配置数据，实现完全动态的表单生成。

async created() {
  const response = await axios.get('/api/form-config')
  this.formFields = response.data
}

表单数据提交处理

动态收集表单数据并处理提交逻辑。

methods: {
  submitForm() {
    const formData = {}
    this.formFields.forEach(field => {
      formData[field.name] = field.value
    })
    // 提交处理...
  }
}

复杂条件表单

根据用户输入动态显示/隐藏相关字段，实现条件表单逻辑。

computed: {
  filteredFields() {
    return this.formFields.filter(field => {
      return !field.condition || field.condition(this.formFields)
    })
  }
}