后台管理系统业务表单封装思路请教?

2023-06-27 296 0

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

// 基础配置
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);

回答

相关文章

nuxt2部署静态化和ssr的时候访问首页先报404再出现首页为什么?
`clip-path` 如何绘制圆角平行四边形呢?
多线程wait方法报错?
VUE 绑定的方法如何直接使用外部函数?
vue2固定定位该怎么做?
谁有redis实现信号量的代码,希望借鉴一下?