当前位置：首页 > VUE

vue 实现动态表单

2026-01-17 23:49:45VUE

Vue 实现动态表单的方法

动态表单通常指表单字段可以动态增减或根据条件变化。以下是几种实现方式：

使用 v-for 动态渲染表单字段

通过数组存储表单字段数据，利用 v-for 动态渲染：

vue 实现动态表单

data() {
  return {
    formItems: [
      { id: 1, label: '姓名', type: 'text', value: '' },
      { id: 2, label: '年龄', type: 'number', value: '' }
    ]
  }
}

<div v-for="item in formItems" :key="item.id">
  <label>{{ item.label }}</label>
  <input 
    :type="item.type" 
    v-model="item.value"
  >
</div>

动态添加/删除表单字段

通过方法操作表单字段数组：

methods: {
  addField() {
    this.formItems.push({
      id: Date.now(),
      label: '新字段',
      type: 'text',
      value: ''
    })
  },
  removeField(index) {
    this.formItems.splice(index, 1)
  }
}

条件渲染不同表单组件

根据类型动态渲染不同输入组件：

vue 实现动态表单

<template v-for="(item, index) in formItems" :key="item.id">
  <div v-if="item.type === 'text'">
    <input type="text" v-model="item.value">
  </div>
  <div v-else-if="item.type === 'select'">
    <select v-model="item.value">
      <option v-for="opt in item.options" :value="opt.value">
        {{ opt.label }}
      </option>
    </select>
  </div>
</template>

使用 Vue 的动态组件

通过 component 的 is 属性实现动态组件：

<component 
  :is="getComponent(item.type)"
  v-model="item.value"
  v-bind="item.props"
></component>

methods: {
  getComponent(type) {
    const components = {
      text: 'input-text',
      select: 'input-select'
    }
    return components[type]
  }
}

表单验证处理

结合 vee-validate 或 vuelidate 进行动态验证：

data() {
  return {
    fields: [
      {
        name: 'email',
        rules: 'required|email',
        value: ''
      }
    ]
  }
}

<div v-for="field in fields" :key="field.name">
  <input 
    v-model="field.value"
    v-validate="field.rules"
    :name="field.name"
  >
  <span>{{ errors.first(field.name) }}</span>
</div>