13｜动态表单组件：怎么优雅地动态渲染表单？-Vue3企业级项目实战

当前位置:　首页>> 技术小册>> Vue3企业级项目实战

13 | 动态表单组件：怎么优雅地动态渲染表单？

在Vue 3的企业级项目开发中，动态表单是一个常见且复杂的需求场景。它要求开发者能够根据后端返回的数据结构或用户交互动态地构建、渲染以及验证表单项。这不仅提升了应用的灵活性和可扩展性，还极大地优化了用户体验。本章将深入探讨如何在Vue 3中优雅地实现动态表单组件，包括表单结构的定义、动态渲染、数据绑定、验证以及表单的提交处理。

1. 表单结构定义

在构建动态表单之前，首先需要定义表单的结构。表单结构通常是一个JSON对象，其中包含了表单项的类型、名称、验证规则等信息。例如：

const formSchema = [
  {
    type: "text",
    label: "姓名",
    name: "name",
    rules: [
      { required: true, message: '请输入姓名', trigger: 'blur' }
    ]
  },
  {
    type: "radio",
    label: "性别",
    name: "gender",
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' }
    ],
    rules: [{ required: true, message: '请选择性别', trigger: 'change' }]
  },
  // 更多表单项...
];

这种结构使得表单的维护和扩展变得简单，只需修改或添加JSON对象即可。

2. 动态表单组件的设计

为了高效渲染动态表单，我们可以设计一个名为DynamicForm的Vue组件，该组件接收formSchema作为props，并根据其内容动态生成子表单项组件。

2.1 组件模板

<template>
  <form @submit.prevent="submitForm">
    <div v-for="item in formSchema" :key="item.name">
      <DynamicFormField 
        v-if="item.type === 'text'"
        :label="item.label"
        :name="item.name"
        v-model="formData[item.name]"
        :rules="item.rules"
      />
      <DynamicFormField 
        v-else-if="item.type === 'radio'"
        :label="item.label"
        :name="item.name"
        :options="item.options"
        v-model="formData[item.name]"
        :rules="item.rules"
      />
      <!-- 根据需要添加更多表单项类型 -->
    </div>
    <button type="submit">提交</button>
  </form>
</template>

2.2 组件脚本

<script setup>
import { ref } from 'vue';
const props = defineProps({
  formSchema: Array
});
const formData = ref({});
function submitForm() {
  // 表单提交逻辑，如使用axios发送请求
  console.log('提交表单:', formData.value);
}
</script>

3. 动态表单项组件（DynamicFormField）

为了支持多种类型的表单项，我们需要为每种类型创建一个或多个具体的表单项组件，如TextInput、RadioGroup等，并在DynamicFormField中根据type属性动态选择使用哪个组件。但为简化示例，这里我们直接在DynamicFormField中实现简单的逻辑判断来模拟这一过程。

3.1 组件模板（简化版）

<template>
  <div>
    <label for="input-{{ name }}">{{ label }}</label>
    <input 
      v-if="type === 'text'"
      type="text"
      :id="'input-' + name"
      :name="name"
      v-model="modelValue"
      @blur="validateField"
    />
    <div v-if="type === 'radio'">
      <label v-for="option in options" :key="option.value">
        <input 
          type="radio"
          :name="name"
          :value="option.value"
          v-model="modelValue"
          @change="validateField"
        />
        {{ option.label }}
      </label>
    </div>
    <!-- 验证信息 -->
    <div v-if="errors.length > 0" class="error-message">
      <ul>
        <li v-for="error in errors" :key="error">{{ error }}</li>
      </ul>
    </div>
  </div>
</template>

3.2 组件脚本（简化版）

<script setup>
import { computed, ref, watch } from 'vue';
import { validate } from 'element-plus/es/el-form/validator'; // 假设使用Element Plus的验证规则
const props = defineProps({
  label: String,
  name: String,
  type: String,
  options: Array,
  modelValue: {
    type: [String, Number, Boolean],
    default: null
  },
  rules: Array
});
const emit = defineEmits(['update:modelValue']);
const errors = ref([]);
watch(() => props.modelValue, () => {
  validateField();
});
function validateField() {
  errors.value = [];
  if (props.rules && props.rules.length > 0) {
    const validator = (rule, value, callback) => {
      if (rule.trigger === 'blur' && !this.$event.type.startsWith('blur')) {
        return callback();
      }
      if (rule.required && value === '') {
        callback(new Error(rule.message));
      } else {
        // 这里可以添加更多自定义验证逻辑
        callback();
      }
    };
    validate(props.modelValue, props.rules.map(rule => ({ ...rule, validator }))).then(() => {
      // 验证通过
    }).catch(err => {
      errors.value = [err.message];
    });
  }
}
// 处理v-model的更新
function updateModel(value) {
  emit('update:modelValue', value);
}
watch(() => props.modelValue, (newVal) => {
  updateModel(newVal);
});
</script>

4. 表单验证与提交

在动态表单中，验证是确保数据质量的重要步骤。如上面的DynamicFormField组件所示，我们已经在每个表单项内部实现了基本的验证逻辑。对于更复杂的验证场景，可以引入第三方库如VeeValidate或Element Plus自带的表单验证功能。

表单提交时，应首先触发所有表单项的验证，只有当所有验证都通过时，才将表单数据发送到服务器。这可以通过在DynamicForm组件的submitForm方法中加入相应的逻辑来实现。

5. 总结

通过上述步骤，我们构建了一个基于Vue 3的动态表单组件系统，该系统能够根据后端提供的表单结构动态渲染表单，并支持基本的验证和提交功能。这种设计不仅提高了代码的复用性和可维护性，还使得动态表单的扩展变得简单灵活。在实际项目中，根据具体需求，还可以进一步添加表单项的拖拽排序、动态添加删除表单项等高级功能。