Vue实现动态表单的示例详解

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

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

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;
}

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;
    }
  }
);

<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>