表单 schema 配置化

devtools/2025/3/16 10:04:52/

一、前沿

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

二、具体实现

1. schema 配置
  • 结构定义schema 对象包含 containers(表单结构的 JSON 数据)、colNum(最多展示列数)和 isViewType(表单是否为只读)等属性。containers 中可以包含多个组件配置,每个组件配置又有 typelabelmodel 等属性。
javascript">schema: {containers: [],colNum: 2,isViewType: false
}
  • 字段配置:不同类型的字段组件(如日期、单选、多选等)根据 schema 中的 type 属性来确定使用哪个具体的组件进行渲染。例如,type: 'date' 会使用 field-date 组件。
2. 组件渲染
  • formGeneratorGroup 组件:根据 schema 中的 type 属性动态渲染不同的表单字段组件。通过 getFieldType 方法 type 获取组件名称,并使用 JSX 进行渲染。
javascript">// 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 && <componentschema={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.schemaconst { keyName: key, valueName: val } = {keyName: 'key',valueName: 'val',...optionName,}return <a-form-model-itemlabel={label}prop={model}><a-radio-groupvalue={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.valuethis.$emit('model-updated', this.schema, this.value)},
}
5. 校验规则初始化

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

javascript">// formGenerator.vue
initRules () {const { containers, rules } = this.cloneSchema// 初始化规则校验对象let initRules = { ...rules }// 平铺所有容器的fieldsconst 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.ppmy.cn/devtools/167519.html

相关文章

Elasticsearch集群与日志系统实战部署指南

一、环境规划与初始化配置 1. 服务器资源分配 IP地址部署服务主机名172.25.23.7ES Kafka Zookeeper Kibananode1172.25.23.8ES Kafka Zookeeper Filebeatnode2172.25.23.9Kafka Zookeeper Apache Logstashnode3 系统要求&#xff1a; 配置&#xff1a;4核CPU / 4G…

Linux环境安装基础工具使用

Linux 软件包管理器 yum 什么是软件包 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序. 但是这样太麻烦了, 于是有些人把一些常用的软件提前编译好, 做成软件包(可以理解成windows上的安装程序)放在一个服务器上, 通过包管理器可以很方…

算法模型全解析:优缺点、场景适配与选择逻辑

算法模型的选择如同量体裁衣,需兼顾业务目标、数据特性与落地成本。以下从传统模型、集成学习、神经网络、新兴范式四大维度,拆解 20 + 主流模型的核心特点与适用场景,附通俗案例说明: 一、传统模型:简单高效的「工业基石」 1. 线性模型(逻辑回归 / LR) 优点:可解释性…

容器技术与Kubernetes概述

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编…

生成对抗网络——pytorch与paddle实现生成对抗网络

生成对抗网络——pytorch与paddle实现生成对抗网络 本文将深入探讨生成对抗网络的理论基础&#xff0c;并通过PyTorch和PaddlePaddle两个深度学习框架来展示如何实现生成对抗网络模型。我们将首先介绍生成对抗网络的基本概念&#xff0c;这些理论基础是理解和实现生成对抗网络…

yolo环境 pytorch环境配置 CUDA安装

安装yolo 直接&#xff1a;pip install ultralytics 就行 如果你只想用cpu驱动ultralytics拿到这就可以使用了 如果你还想用nvidia显卡gpu去驱动yolo那还需要安装cudapytorch 首先搜索你的电脑&#xff1a;nvidia-smi 可以看到你的驱动560.94 cuda最高版本到12.6 所以俺最…

MySQL开发陷阱与最佳实践:第1章:MySQL开发基础概述-1.1 MySQL简介与应用场景

&#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 文章大纲 MySQL开发陷阱与最佳实践&#xff1a;第1章&#xff1a;MySQL开发基础概述-1.1 MySQL简介与应用场景1.1.1 MySQL的发展历程与市场地位1.1.2 MySQL的核心特性与技术优势1.1.2…

【蓝桥杯】高能粒子对撞机轨迹中位数优化

问题描述 威慑纪元 2233 年&#xff0c;人类地球联邦为了突破质子科技封锁&#xff0c;决定在太阳系的黄道平面上建造大量高能粒子对撞机&#xff0c;与普通高能粒子对撞机不同的是&#xff0c;可以将黄道平面抽象为一个二维平面。 一共有 nn 个 αα 高能粒子和 mm 个 ββ …