前端 - 后台管理系统业务表单封装思路请教？

Question

目前我们的项目是VUE2,表单已经经过二次封装，是通过传入配置项的方式生成的。现在有一个问题，一个页面有2个表单，这两个表单很相似，只有部分配置项不同，比如某些项是否disabled，某些项是否必填项校验，这种情况下，需要写两份配置项吗？还是说做if判断呢，总觉得if判断耦合度好高，但是重写的话如果未来有修改需要修改的地方又会很多难免有遗漏，请问有没有什么比较好的方案和思路，感谢！

Answer 1

// 基础配置
const baseConfig = {
  fields: [
    { name: 'username', required: true, disabled: false },
    { name: 'email', required: true, disabled: false },
    // 更多字段...
  ],
  // 更多配置...
};

// 表单1的特定配置
const form1Config = {
  fields: [
    { name: 'username', disabled: true }, // 覆盖基础配置
    // 更多字段...
  ],
  // 更多配置...
};

// 表单2的特定配置
const form2Config = {
  fields: [
    { name: 'email', required: false }, // 覆盖基础配置
    // 更多字段...
  ],
  // 更多配置...
};

// 合并配置
const mergeConfig = (baseConfig, specificConfig) => {
  // 合并逻辑
  
  return { ...baseConfig, ...specificConfig };
};

const finalForm1Config = mergeConfig(baseConfig, form1Config);
const finalForm2Config = mergeConfig(baseConfig, form2Config);