表单 schema 配置化

news2025/3/16 15:21:38

一、前沿

基于 Ant Design Vue 组件库实现了表单的配置化生成,通过 schema 配置化的方式实现表单的动态渲染、数据绑定和更新等功能,而提交按钮及获取数据逻辑由使用方自行提供。通过 schema 对象来定义表单的结构和属性,modelData 对象存储表单数据。主要组件包括 z-form-generatorformGeneratorGroup 以及各种具体的表单字段组件(如 field-datefield-radio 等)。

二、具体实现

1. schema 配置
  • 结构定义schema 对象包含 containers(表单结构的 JSON 数据)、colNum(最多展示列数)和 isViewType(表单是否为只读)等属性。containers 中可以包含多个组件配置,每个组件配置又有 typelabelmodel 等属性。
schema: {
  containers: [],
  colNum: 2,
  isViewType: false
}
  • 字段配置:不同类型的字段组件(如日期、单选、多选等)根据 schema 中的 type 属性来确定使用哪个具体的组件进行渲染。例如,type: 'date' 会使用 field-date 组件。
2. 组件渲染
  • formGeneratorGroup 组件:根据 schema 中的 type 属性动态渲染不同的表单字段组件。通过 getFieldType 方法 type 获取组件名称,并使用 JSX 进行渲染。
// formGeneratorGroup.js
const { getFieldType, field, colNum } = this
const comArr = ['area', 'checkbox', 'date', 'file', 'input', 'radio', 'search', 'select', 'upload', 'modal', 'cascader', 'list']
let isCom = _.includes(comArr, field.type)
const component = isCom ? getFieldType(field) : null
const { type, ...restProps } = field
return (
  <a-col>
    {
      component && <component
        schema={restProps}
        modelData={this.modelData}
        isViewType={this.isViewType}
        on-model-updated={this.onModelUpdated}
        on-error-updated={this.onErrorUpdated}
        on-schema-updated={this.onSchemaUpdated}
      />
    }
  </a-col>
)
  • 具体字段组件:每个字段组件(如 field-datefield-radio 等)根据 schema 中的属性进行渲染,并处理相应的事件(如 onChange)。
  getFieldType ({ type } = {}) {
    if (!type) {
      throw new Error('请确认组件类型')
    }
    return `Field-${type}`
  },
3. 组件化设计

采用组件化的设计思想,将不同类型的表单组件封装成独立的组件,如 FieldRadioFieldCheckboxFieldFile 等。每个组件都接收 schemamodelData 作为 props,通过 render 函数动态渲染表单元素。

// field-radio.vue
export default {
  name: 'FieldRadio',
  props: {
    schema: {
      type: Object,
      default: () => ({}),
      require: true,
    },
    modelData: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    changeHandle (e) {
      this.value = e.target.value
    },
  },
  render () {
    const { label, model, list, optionName, ...restSchema } = this.schema
    const { keyName: key, valueName: val } = {
      keyName: 'key',
      valueName: 'val',
      ...optionName,
    }
    return <a-form-model-item
      label={label}
      prop={model}
    >
      <a-radio-group
        value={this.value}
        prop={{ ...restSchema }}
        onChange={this.changeHandle}
      >
        <a-row>
          {
            list && list.map(el =>
              <a-col span={12}>
                <a-radio value={el[key]}>
                  {el[val]}
                </a-radio>
              </a-col>
            )
          }
        </a-row>
      </a-radio-group>
    </a-form-model-item>
  },
}
4. 数据绑定与更新

通过 modelData 对象实现表单数据的绑定。在组件中,通过 props 属性将 model 绑定到表单元素上,然后通过 $emit 触发自定义事件,将数据更新传递给父组件。

// field-radio.vue
methods: {
  changeHandle (e) {
    this.value = e.target.value
    this.$emit('model-updated', this.schema, this.value)
  },
}
5. 校验规则初始化

通过 initRules 方法初始化表单的校验规则。根据 schema 中的 required 属性和组件类型,为每个字段添加相应的校验规则。

// formGenerator.vue
initRules () {
  const { containers, rules } = this.cloneSchema
  // 初始化规则校验对象
  let initRules = { ...rules }
  // 平铺所有容器的fields
  const components = containers.reduce((acc, container) => {
    acc.push(...container.components);
    return acc;
  }, []);
  // 统一处理字段规则
  components.forEach(field => {
    const { code, type, required, inputType, regular, errorMessage, precision } = field;

    // 初始化当前字段的校验规则
    if (!initRules[code]) initRules[code] = [];
    // 兼容 required 历史数据
    if (required) {
      const requiredRule = type === 'list'
        ? { required: true, message: '该列表不得为空,请为列表新增数据' }
        : { required: true, message: '该项不得为空', trigger: type === 'date' ? 'change' : 'blur' };
      initRules[code].unshift(requiredRule);
    }

	// 如果是input类型组件,处理其校验规则
    if (type === 'input') {
      let ruleItem = initRules[code];

      // 处理内建的输入框类型校验
      if (inputType && ['phone', 'intNum', 'number', 'email', 'idCardNo', 'bussNo', 'bankNo'].includes(inputType)) {
		const { reg, message } = inputType === 'number' ? RulesReg[inputType][idx] : RulesReg[inputType]
        addValidationRule.call(this, ruleItem, reg, message)
      }

      // 处理自定义正则校验
      if (regular) {
        const reg = new RegExp(regular);
        const message = errorMessage;
        addValidationRule.call(this, ruleItem, reg, message)
      }

      initRules[code] = [...ruleItem];
    }
  })
 
  // 更新规则
  this.rules = initRules;
}

addValidationRule(ruleItem, reg, message) {
  ruleItem.push({
    validator: (rule, value, cb) => this.valitaRule(reg, value, cb, message),
    trigger: 'blur',
  });
}

三、特点

  1. 配置化设计:通过 schema 配置化的方式,实现了表单的动态生成和定制,提高了代码的可维护性和可扩展性。
  2. 组件化开发:将不同类型的表单组件封装成独立的组件(如 field-datefield-radio 等),提高了代码的复用性和可测试性。
  3. 动态渲染:根据 schema 中的 type 属性动态渲染不同的表单组件,实现了表单的灵活定制。
  4. 规则校验:支持多种类型的规则校验,包括必填项校验、输入框校验等,确保了用户输入数据的合法性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2316113.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LINUX --- KVM

什么是 KVM&#xff1f;– 基于内核的虚拟机简介 – AWS (amazon.com) 什么是 KVM&#xff1f; 基于内核的虚拟机&#xff08;KVM&#xff09;是一种软件功能&#xff0c;您可以将其安装在物理 Linux 机器上以创建虚拟机。虚拟机是一种软件应用程序&#xff0c;可作为另一台实…

LabVIEW VI Scripting实现连接器窗格自动化

通过VI Scripting自动化配置连接器窗格&#xff0c;可大幅提升开发效率、统一接口规范&#xff0c;并适配动态需求。以下为真实场景中的典型应用案例&#xff0c;涵盖工业、汽车电子及教育领域&#xff0c;展示其实际价值与实施效果。 特点&#xff1a; 程序化配置&#xff1a;…

网络安全信息收集[web子目录]:dirsearch子目录爆破全攻略以及爆破字典结合

目录 一、dirsearch 工具详细使用攻略 1. 安装 前提条件 安装步骤 可选&#xff1a;直接下载预编译版本 2. 基本用法 命令格式 参数说明 示例 3. 核心功能与高级用法 3.1 多线程加速 3.2 自定义字典 3.3 递归扫描 3.4 过滤响应 3.5 添加请求头 3.6 代理支持 3…

pandas表格内容比较

前阵子来了一个211大学实习生&#xff08;小男生&#xff09;&#xff0c;要比较2个版本字段的变化&#xff0c;辅助完成系统升级字段替换&#xff0c;要求找出哪些字段是新增的&#xff0c;哪些字段是删除的&#xff0c;哪些字段是属性信息修改的&#xff0c;要求半天时间搞定…

TMS320F28P550SJ9学习笔记13: 软件I2C_驱动AT24Cxx存储芯片

今日尝试配置软件I2C通信&#xff0c;我的目标通信芯片是AT24C64&#xff0c;相较于AT24C02这样的8位寻址&#xff0c;它是16位寻址的&#xff0c;所以有些不同 文章提供测试代码讲解、完整工程下载、测试效果图 目录 软件I2C引脚初始化&#xff1a; C内联函数改变SCL与SDA的输…

手抖预防方法主要包括以下几个方面

手抖预防方法主要包括以下几个方面&#xff1a; 1. 心理调节&#xff1a;保持心情舒畅&#xff0c;避免过度紧张和焦虑。如有必要&#xff0c;可以寻求心理医生帮助进行心理调适。 2. 充分休息&#xff1a;保证充足的睡眠时间&#xff0c;避免熬夜和过度劳累。合理安排工作和…

SpringBoot MCP 入门使用

随着AI的火爆&#xff0c;最近发现MCP在未来确实大有可为&#xff0c;作为一名javaer怎么可以落后在历史洪流呢&#xff0c;根据官网和cursor也从零开始体验一下自定义mcp server。以后可以根据自己业务场景做出各种适合自身业务的工具。 至于什么是MCP 可以到https://modelcon…

Windows 11 安装Docker Desktop环境

1、确认CPU开启虚拟化 打开任务管理器&#xff0c;切换到“性能”选项卡&#xff0c;查看 CPU 信息。若“虚拟化”状态显示为“已启用”&#xff0c;则表示虚拟化已开启&#xff1b;若显示为“已禁用”&#xff0c;则需要在启动时进入 BIOS 开启虚拟化设置&#xff08;若显示已…

汽车保养记录用什么软件记录,汽车维修记录查询系统,佳易王汽车保养维护服务记录查询管理系统操作教程

一、概述 本实例以佳易王汽车保养维护服务记录查询管理系统为例说明&#xff0c;其他版本可参考本实例。试用版软件资源可到文章最后了解&#xff0c;下载的文件为压缩包文件&#xff0c;请使用免费版的解压工具解压即可试用。 软件特点&#xff1a;1、功能实用&#xff0c;操…

深入理解C/C++堆数据结构:从原理到实战

一、堆的本质与特性 1.1 什么是堆数据结构&#xff1f; 堆&#xff08;Heap&#xff09;是一种特殊的完全二叉树&#xff0c;它满足以下核心性质&#xff1a; 堆序性&#xff1a;每个节点的值都满足特定顺序关系 结构性&#xff1a;完全二叉树的结构特性&#xff08;除最后一…

【MATLAB实战】实现白鲸算法(BWO)优化BP神经网络:提升模型性能的新思路

一、什么是白鲸优化算法&#xff08;BWO&#xff09;&#xff1f; 白鲸优化算法是受自然界中白鲸群体行为和觅食策略启发的一种新型智能优化算法。白鲸在捕食过程中展现出高效的协作能力和适应性&#xff0c;例如通过“回声定位”搜索猎物位置群体间信息共享&#xff0c;这些行…

医疗资源联动,广州长泰医院与海南德雅医院共筑地贫防治新篇章

​ 为贯彻落实"健康中国"战略关于出生缺陷综合防治的部署要求&#xff0c;推动地中海贫血防治体系建设。2025年3月15日&#xff0c;广州长泰医院与海南德雅医院联合主办的“地中海贫血生殖遗传干预大型义诊暨合作签约仪式”在广州正式启动&#xff0c;活动以“爱与希…

DeepSeek在医学领域的应用

DeepSeek作为高性能AI大模型&#xff0c;在医学领域的应用场景广泛&#xff0c;结合其在数据处理、自然语言理解和深度学习方面的优势&#xff0c;显著推动了医疗行业的智能化转型。以下是其核心应用场景及具体案例&#xff1a; 1. 辅助诊断与决策支持 临床辅助诊断&#xff1…

3.数据结构-串、数组和广义表

串、数组和广义表 3.1串3.1.1串的类型定义、存储结构及其运算串的顺序存储串的堆式顺序存储结构串的链式存储 3.1.2 串的模式匹配算法BF算法*KMP算法&#xff08;待更新&#xff09; 3.2数组3.2.1数组的顺序存储3.2.2特殊矩阵的压缩存储对称矩阵三角矩阵对角矩阵 3.3广义表*案例…

苹果电脑杀毒软件CleanMyMac

杀毒软件在苹果家族中是一个小众软件&#xff0c;百度搜索苹果电脑杀毒软件&#xff0c;可能各种杀软良莠不齐&#xff0c;因为在这个市场非常小&#xff0c;绝大多数都是冲着“清理”去的&#xff0c;而不是杀毒。最近测试了一款Mac电脑杀毒软件&#xff0c;杀毒效果也是一般般…

Day16:二叉搜索树和双向链表

将一个 二叉搜索树 就地转化为一个 已排序的双向循环链表 。 对于双向循环列表&#xff0c;你可以将左右孩子指针作为双向循环链表的前驱和后继指针&#xff0c;第一个节点的前驱是最后一个节点&#xff0c;最后一个节点的后继是第一个节点。 特别地&#xff0c;我们希望可以…

Qt QML实现弹球消砖块小游戏

前言 弹球消砖块游戏想必大家都玩过&#xff0c;很简单的小游戏&#xff0c;通过移动挡板反弹下落的小球&#xff0c;然后撞击砖块将其消除。本文使用QML来简单实现这个小游戏。 效果图&#xff1a; 正文 代码目录结构如下&#xff1a; 首先是小球部分&#xff0c;逻辑比较麻…

如何在实际应用中测量和调整直线导轨的预紧力?

在实际应用中&#xff0c;准确测量和调整直线导轨的预紧力对于保证设备的性能和精度至关重要&#xff0c;但测量和调整直线导轨的预紧力需要根据具体的导轨型号和结构来选择合适的方法。以下是一些常见的测量和调整方法&#xff1a; 1、使用压力传感器&#xff1a;在一些先进的…

YOLO11 使用入门

YOLO12 使用入门 1. 源码下载2. 权重下载3. 环境配置4. 例程测试4.1. 目标检测4.1.1. 源文件 model4.1.2. 结果Results4.1.3. 边界框 Boxes 2.2. 图像分割4.2.1. 推理 model.predict4.2.2. 掩码 Masks 1. 源码下载 之前介绍了《目标检测 YOLOv5 使用入门》 现在是 2024.12.2…

汽车感性负载-智能高边钳位能量计算

随着汽车电子技术的发展&#xff0c;新的电子电气架构下&#xff0c;越来越多的执行部件在车身出现&#xff0c;比如电磁阀、风机、水泵、油泵、雨刮继电器等常用的执行器&#xff0c; 它们一般都表现为感性特点。驱动这些负载的最简单和最常见的方法是将它们连接到高边侧开关(…