Vue3中一个偷懒的定义当前项的方法

Vue3中一个偷懒的定义当前项的方法

先说标准写法


interface CurrentProcess {
  year: string;
  province_name: string;
  f3: string;
  f4: string;
  f5: string;
  f6: string;
}

// 初始化时指定类型(更安全)
let currentProcess = reactive<CurrentProcess>({
  year: '',
  province_name: '',
  f3: '',
  f4: '',
  f5: '',
  f6: ''
});

这是懒的不想动的写法

import { reactive } from 'vue';

// 你的 schema 定义
const schema = reactive<FormSchema[]>([...]); // 你原来的 schema 数组

// 动态生成 currentProcess(包含所有表单字段的空值)
const formFields = schema.map(item => item.field);
let currentProcess = reactive<any>({
  ...Object.fromEntries(formFields.map(field => [field, '']))
});

// 后续表单中使用示例:
// 当 Input 组件触发 onUpdate:modelValue 时,会自动更新 currentProcess 对应字段的值
// 例如输入 "2025" 到 year 字段,currentProcess.year 会变为 "2025"

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注