Vue实现动态表单

使用 Vue 实现动态表单

在前端开发中，我们经常遇到根据用户输入动态生成不同表单项的需求。这类动态表单不仅提升了用户体验，还可以让复杂的交互流程变得简洁而高效。本文将详细讲解如何使用 Vue 3 的响应式特性，逐步构建一个递归动态表单。

效果预览

1. 什么是动态表单？

动态表单的核心是：根据用户在表单中的输入，自动调整后续表单项的显示内容。例如，用户在某个表单输入特定的值时，会显示下一个问题或选项，而如果用户输入不同的值，则会跳转到另外一套问题。这种交互使得表单流程更加智能和灵活。

在本文中，我们将创建一个递归的动态表单，表单项之间通过逻辑相互连接。当某个表单项的值发生变化时，它将动态显示下一个表单项，或者结束表单流程。

---

2. Vue 中表单项的数据结构设计

为了实现动态表单，我们需要抽象出一个通用的表单项结构。在这个案例中，我们定义了一个叫做 FormItem 的数据结构，每个表单项都可以看作是这个结构的一个实例。它包含表单类型、表单内容、表单的递归关系等。

表单项数据结构 (FormItem)

export type FormItemType = 'input' | 'select' | 'checkbox' | 'radio';

export interface FormItem {
  type: FormItemType;  // 表单项的类型
  payload: any;        // 表单项的数据（如标签、值、选项）
  next: (current: FormItem, acients: FormItem[]) => FormItem | null;  // 选择下一个表单项的逻辑
  parent: FormItem | null;  // 父级表单项
}

每个表单项有以下几个重要部分：

• type：表单项的类型，比如输入框、选择框等。
• payload：存储表单项的实际内容，包括标签、默认值、选项等。
• next ：这是核心的递归部分，它是一个函数，用来决定当前表单项完成后，应该显示的下一个表单项是什么。该函数返回下一个表单项或 null。
• parent：当前表单项的父表单项，用来管理表单项的层级关系。

---

3. 动态创建表单项：createFormItem 函数

为了简化每次创建表单项的流程，我们编写了一个 createFormItem 函数，这个函数帮助我们快速生成一个表单项，并确保每个表单项是响应式的。

createFormItem 函数实现

import { isReactive, reactive } from 'vue';

export function createFormItem(
  formItemType: FormItem['type'],
  payload: FormItem['payload'],
  next?: FormItem['next'],
  parent?: FormItem['parent']
): FormItem {
  if (!next) {
    next = () => null;
  }
  if (!parent) {
    parent = null;
  }

  const nextFunc: FormItem['next'] = (current, acients) => {
    let nextItem = next!(current, acients);
    if (!nextItem) {
      return null;
    }
    nextItem.parent = current;
    if (!isReactive(nextItem)) {
      nextItem = reactive(nextItem);
    }
    return nextItem;
  };

  const formItem: FormItem = reactive({
    type: formItemType,
    payload,
    next: nextFunc,
    parent,
  });

  return formItem;
}

理解 createFormItem

• formItemType 和 payload 分别是表单项的类型和内容。
• next 是一个函数，用来决定当前表单项的值更新后，应该展示的下一个表单项。
• 该函数返回的表单项通过 Vue 的 reactive 方法将其转为响应式对象，以确保后续的表单变更可以实时更新页面。

---

4. 实际使用：创建表单项实例

接下来，我们基于 createFormItem 函数创建几个具体的表单项。下面的例子展示了如何构建一个简单的输入框，然后根据用户的输入展示不同的表单项：

const item1 = createFormItem(
  'input',                        // 表单类型：输入框
  { label: 'test1', value: '' },   // 数据：标签和输入值
  (current) => (current.payload.value === 'test1' ? item2 : item3)  // 逻辑：如果值为 'test1'，显示 item2，否则显示 item3
);

const item2 = createFormItem(
  'select',  // 下拉选择框
  {
    label: 'test2',
    options: [
      { label: 'test2-1', value: 'test2-1' },
      { label: 'test2-2', value: 'test2-2' },
      { label: 'test2-3', value: 'test2-3' },
    ],
    value: 'test2-1',
  },
  (current) => {
    if (current.payload.value === 'test2-2') {
      return item3;
    } else if (current.payload.value === 'test2-3') {
      return item4;
    } else {
      return null;
    }
  }
);

动态逻辑的关键

• item1 是一个输入框，用户输入 'test1' 时会展示 item2，否则会展示 item3。
• item2 是一个下拉选择框，当用户选择不同的选项时，展示不同的表单项。

通过这样的逻辑，我们可以根据用户的输入和选择动态调整表单的流程，创建灵活的表单交互。

---

5. 表单项的递归渲染

为了在页面上展示这些动态表单项，我们使用 Vue 的递归组件。递归组件是一种强大的模式，可以帮助我们渲染多层级的结构，比如父子表单项之间的递归关系。

递归组件：FormItemComp.vue

<template>
  <div v-if="formState">
    <!-- 根据表单类型渲染不同表单项 -->
    <input v-if="formState.type === 'input'" v-model="formState.payload.value" :placeholder="formState.payload.label" />
    <select v-if="formState.type === 'select'" v-model="formState.payload.value">
      <option v-for="option in formState.payload.options" :key="option.value" :value="option.value">
        {{ option.label }}
      </option>
    </select>
    <!-- 渲染下一个表单项 -->
    <FormItemComp v-if="nextFormItem" :form-state="nextFormItem" />
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  formState: Object,
});

const nextFormItem = computed(() => {
  return formState.next(formState, []);
});
</script>

在这个递归组件中：

• 根据 formState 的 type 来渲染不同的表单类型（如 input 或 select）。
• 当用户在某个表单项中输入或选择内容时，递归地展示下一个表单项。

---

6. 总结

通过本文的讲解，我们一步一步构建了一个递归动态表单。使用 Vue 的响应式系统和递归组件，我们可以根据用户输入的内容动态展示后续表单项。本文所介绍的这种方式特别适用于那些复杂的、依赖用户输入的表单场景，如多步骤表单、条件性表单等。

关键点回顾：

1. 表单项结构设计 ：每个表单项都使用 FormItem 数据结构来定义类型、内容和递归逻辑。
2. createFormItem 函数：简化了表单项的创建过程，并确保每个表单项是响应式的。
3. 递归渲染：使用 Vue 递归组件渲染出多层次的表单结构。
4. 动态交互 ：通过 next 函数的逻辑，实现了表单项之间的动态交互。

希望这篇文章能帮助你理解如何使用 Vue 来构建动态表单，并在实际项目中灵活运用。

Ps：完整源码

特别鸣谢：前端大神(袁进)

https://github.com/Wnagfeng/Commonscenarios/tree/main/02vue