Vue3+ts----根据配置项，动态生成表单

这里使用的UI框架是ElementPlus，更换其他组件直接更换constant.ts中的type配置和对应的Form组件即可.
大家可以npm install elementplus_dy_form来体验。
思路：
1.这里需要使用h函数方便控制要渲染的表单
2.传递type作为组件或html元素进行渲染，
3.默认包一层El-form，每个数组项会包一个El formItem
4.传入formDataKey，对绑定的表单项进行映射
5.通过next函数决定渲染的表单，next函数接收参数即表单数据

建议配置unplugin-auto-impor插件

创建一个静态文件存放配置

import { type DyFormConfig } from '../components/DyForm/DyForm.'
import {ElButton,ElInput,ElCheckbox,ElSelect,ElOption,ElSwitch,ElCheckboxGroup,ElRadioGroup,ElRadio,ElCol,ElDatePicker} from 'element-plus'
export class UserForm {name?: stringorganization?: stringdate1?: stringdate2?: stringdelivery?: booleantype?: []resource?: stringdesc?: stringpersonInfo?: stringdeveloperName?: stringsponsorName?: string
}export function useDyFormConfig(dyForm: any) {const DyFormConfig: DyFormConfig<UserForm>[] = [{type: ElInput,formItemConfig: {label: '请输入姓名',},formConfig: {placeholder: '请输入姓名',},formDataKey: 'name'},{type: ElSelect,formItemConfig: {label: '请选择组织',},formConfig: {placeholder: '请选择您的组织'},formDataKey: 'organization',children: [{type: ElOption,formConfig: { label: '个人', value: 'person' },},{type: ElOption,formConfig: { label: '公司', value: 'company' }},{type: ElOption,formConfig: { label: '无', value: 'none' }}],next(formData) {if (formData.organization === 'none') {return {next() {return {type: ElInput,formItemConfig: {label: '请输入您所属组织'},}}}} else if (formData.organization === 'company') {return [{type: 'div',formConfig: {style: {width: '100%',display: 'flex'}},formItemConfig: {label: '请选择日期', },children: [{type: ElCol,formConfig: {span: 11},children: [{needFormItem: true,type: ElDatePicker,formDataKey: 'date1',formConfig: {type: "date",placeholder: "请选择进入公司日期",style: "width: 100%"},}]},{type: ElCol,formConfig: {span: 2},children: [{type: 'span',children: '-'}]},{type: ElCol,formConfig: {span: 11},children: [{needFormItem: true,type: ElDatePicker,formDataKey: 'date2',formConfig: {type: "date",placeholder: "请选择毕业日期",style: "width: 100%"},}]},],next(formData) {console.log(formData)return [{type: ElInput,formItemConfig: {label: '请输入个人信息'},formConfig: {placeholder: '请输入个人信息'}}]}},]} else {return [{type: ElInput,formDataKey: 'personInfo',formItemConfig: {label: '请输入个人信息'},formConfig: {placeholder: '请输入个人信息'}}]}}},{type: ElSwitch,formDataKey: 'delivery',formItemConfig: {label: 'Instant delivery',}},{type: ElCheckboxGroup,formDataKey: 'type',formItemConfig: {label: 'Activity type',},children: [{ type: ElCheckbox, slots: { default: () => '活动1' }, formConfig: { name: 'type', label: '活动1' } },{ type: ElCheckbox, slots: { default: () => '活动2' }, formConfig: { name: 'type', label: '活动2' } },{ type: ElCheckbox, slots: { default: () => '活动3' }, formConfig: { name: 'type', label: '活动3' } },{ type: ElCheckbox, slots: { default: () => '活动4' }, formConfig: { name: 'type', label: '活动4' } }],},{type: ElRadioGroup,formDataKey: 'resource',formItemConfig: {label: 'Resources'},children: [{type: ElRadio,formConfig: {label: 'Sponsor'}},{type: ElRadio,formConfig: {label: 'Developer'}},],next(formData) {const resource = formData.resourceconst obj = {'Sponsor': [{type: ElInput,formDataKey: 'sponsorName',formItemConfig: {label: '请输入赞助商名称'},}],'Developer': [{type: ElInput,formDataKey: 'developerName',formItemConfig: {label: '请输入开发商名称'},}],} as Record<string, DyFormConfig[]>if (!resource) {return []} else {return obj[resource]}},},{type: ElInput,formConfig: {type: 'textarea'},formDataKey: 'desc',formItemConfig: {label: 'Activity form',}},{type: 'div',formConfig: {style: {width: "100%",display: "flex"}},children: [{type: ElCol,formConfig: {span: 6},children: [{type: ElButton,formConfig: {type: 'warning',onClick: async () => {const formRef = dyForm!.value!.getFormRef()formRef.value.validate()}},slots: {default: () => '确认'}}]},{type: ElCol,formConfig: {span: 18},children: [{type: ElButton,formConfig: {type: 'danger',onClick: () => {const formRef = dyForm!.value!.getFormRef()formRef.value.resetFields()}},slots: {default: () => '取消'}}]}]}];return {DyFormConfig}
}

使用示例

<script setup lang="ts">
import {DyForm} from './components/Dyform/DyForm.ts';
import { useDyFormConfig, UserForm } from './utils/constant'
import {ref,reactive} from 'vue'const dyForm = ref(null)
const { DyFormConfig }  = useDyFormConfig(dyForm)
const form = ref<UserForm>({name: '',organization: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: '',personInfo:''
});const rules = {name: [{ required: true, message: 'Please input Activity name', trigger: 'blur' },{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },],region: [{required: true,message: 'Please select Activity zone',trigger: 'change',},],delivery: [{required: true,message: 'Please select delivery',trigger: 'change',},],organization: [{required: true,message: 'Please select organization',trigger: 'change',},],date1: [{type: 'date',required: true,message: 'Please pick a date',trigger: 'change',},],date2: [{type: 'date',required: true,message: 'Please pick a time',trigger: 'change',},],type: [{type: 'array',required: true,message: 'Please select at least one activity type',trigger: 'change',},],resource: [{required: true,message: 'Please select activity resource',trigger: 'change',},],desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' },],
}const formConfig = reactive({labelWidth: '130px',rules
})</script><template><DyForm ref="dyForm" v-model="form" :dyFormConfig="DyFormConfig" :formConfig="formConfig" />
</template><style scoped>
#app,
html,
body {width: 100vw;height: 100vh;
}</style>

动态组件源码

import { VNode } from "vue"
import { getTypes } from '../../utils/types'
import {type FormInstance,ElForm,ElFormItem } from "element-plus"
import {defineComponent,ref,h} from 'vue'
interface Slots extends Record<string, () => any> {default: () => string | VNode
}
type Next = (formData: Props['modelValue']) => DyFormConfig[] | DyFormConfigexport interface DyFormConfig<T = Props['modelValue']> {type?: anyformConfig?: Record<string, any>formDataKey?: keyof TformItemConfig?: Record<string, any>children?: DyFormConfig<T>[] | stringslots?: Slotsnext?: NextneedFormItem?: boolean
}
interface Props {modelValue: Record<string, any>dyFormConfig: DyFormConfig[]formConfig: Record<string, any>
}
export const DyForm = defineComponent<Props>((props, { emit, expose }) => {expose({getFormRef: (): any & FormInstance => formRef})const rederChild = () => props.dyFormConfig.map((item: DyFormConfig) => {const traverChildren = (child: DyFormConfig['children']): any => {return child && typeof child !== 'string' && child.map(item => {if (typeof item.children === 'string') {return h(item.type, item.children)}const childeVnode = h(item.type, item.formDataKey ?{...item.formConfig,modelValue: props.modelValue[item.formDataKey],'onUpdate:modelValue': (value: any) => emit('update:modelValue', { ...props.modelValue, [item.formDataKey as string]: value })} :item.formConfig,{default:()=>[item.children && traverChildren(item.children), item.slots && renderSlots(item)]})if (item.needFormItem) {return h(ElFormItem, { ...item?.formItemConfig, prop:item?.formConfig?.prop || item.formDataKey , },{default:()=>childeVnode})}return childeVnode})}const renderSlots = (options: DyFormConfig): any => {return Object.keys(options.slots || {}).map((slot: any) => {return options.slots![slot]()})}const render = (options: DyFormConfig): any => {return h(ElFormItem, { ...options.formItemConfig, prop: options?.formConfig?.prop || options.formDataKey },{default:()=>[h(options.type,options.formDataKey ?{...options.formConfig,modelValue: props.modelValue[options.formDataKey],'onUpdate:modelValue': (value: any) => emit('update:modelValue', { ...props.modelValue, [options.formDataKey as string]: value })} : options.formConfig,{default:()=>options.slots ? renderSlots(options) : traverChildren(options.children || [])})]})}const renderNext = (item: DyFormConfig): DyFormConfig[] | [] => {const nextOptions = item.next?.(props.modelValue) as DyFormConfigif (!nextOptions) {console.error(`请检查next函数返回值是否有误,目前返回值为${nextOptions}`)return []}if (getTypes(nextOptions) === 'Object' && nextOptions?.next) {return renderNext(nextOptions)}return Array.isArray(nextOptions) ? nextOptions.map(option => render(option)) : render(nextOptions)}const renderVnode = render(item)return item.next ? [renderVnode,renderNext(item)] : [renderVnode]})const formRef = ref<FormInstance>()return () => {return h(ElForm, {ref: formRef,model: props.modelValue,...props.formConfig}, {default: ()=>rederChild()})}},{props: {modelValue: {type: Object,required:true,},dyFormConfig: {type: Object,required:true,},formConfig: {type: Object,default:()=>{}}},emits: ['update:modelValue']}
)

结果展示:
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

PHP基础 - 输入输出

PHP基础 - 输入输出

在 PHP 中，有多种方法可以用来输出内容。下面是其中的几种： 1、echo： 这是最常见的输出语句之一，可以输出一个或多个字符串。它是一个语言结构，可以省略括号。使用示例如下： <?php // 使用 echo 语句输出一个字符串 echo "Hello, world!\n";// 可以使用…
阅读更多...
P1035 [NOIP2002 普及组] 级数求和题解

P1035 [NOIP2002 普及组] 级数求和题解

题目 已知&#xff1a;.显然对于任意一个整数 k&#xff0c;当 n 足够大的时候,Sn​>k。 现给出一个整数k&#xff0c;要求计算出一个最小的n&#xff0c;使得Sn​>k。 输入输出样例 输入 1 输出 2 代码 #include<iostream> using namespace std; int mai…
阅读更多...
周周爱学习之Redis重点总结

周周爱学习之Redis重点总结

redis重点总结 在正常的业务流程中&#xff0c;用户发送请求&#xff0c;然后到缓存中查询数据。如果缓存中不存在数据的话&#xff0c;就会去数据库查询数据。数据库中有的话&#xff0c;就会更新缓存然后返回数据&#xff0c;数据库中也没有的话就会给用户返回一个空。 1.缓…
阅读更多...
AIGC创作系统ChatGPT网站源码,Midjourney绘画,GPT联网提问/即将支持TSS语音对话功能

AIGC创作系统ChatGPT网站源码,Midjourney绘画,GPT联网提问/即将支持TSS语音对话功能

一、AI创作系统 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI…
阅读更多...
leetcode 面试题 02.02. 返回倒数第k个节点

leetcode 面试题 02.02. 返回倒数第k个节点

提建议就是&#xff0c;有些题还是有联系的&#xff0c;建议就收看完 876.链表的中间节点&#xff08;http://t.csdnimg.cn/7axLa&#xff09;&#xff0c;再将这一题联系起来 面试题 02.02. 返回倒数第k个节点 题目&#xff1a; 实现一种算法&#xff0c;找出单向链表中倒数第…
阅读更多...
这些接口自动化测试工具如果不知道，就真out了！

这些接口自动化测试工具如果不知道，就真out了！

一、Postman Postman是一款广受欢迎的API测试工具&#xff0c;除了手动发送HTTP请求的基本功能&#xff0c;它还提供了自动化测试和脚本测试的功能&#xff0c;非常适合进行HTTP接口的自动化测试。 二、Rest-Assured Rest-Assured是一个Java库&#xff0c;专为REST服务的测试…
阅读更多...
C++异常剖析

C++异常剖析

什么是异常&#xff1f; 在程序运行的过程中&#xff0c;我们不可能保证我们的程序百分百不出现异常和错误&#xff0c;那么出现异常时该怎么报错&#xff0c;让我们知道是哪个地方错误了呢? C中就提供了异常处理的机制。 一、异常处理的关键字 &#xff08;1&#…
阅读更多...
联想电脑重装系统Win10步骤和详细教程

联想电脑重装系统Win10步骤和详细教程

联想电脑拥有强大的性能&#xff0c;很多用户办公都喜欢用联想电脑。有使用联想电脑的用户反映系统出现问题了&#xff0c;想重新安装一个正常的系统&#xff0c;但是不知道重新系统的具体步骤。接下来小编详细介绍给联想电脑重新安装Win10系统系统的方法步骤。 推荐下载 系统之…
阅读更多...
客厅颜值担当：木饰面电视背景墙设计。福州中宅装饰，福州装修

客厅颜值担当：木饰面电视背景墙设计。福州中宅装饰，福州装修

你是否也为客厅的装修设计而烦恼&#xff1f;现在&#xff0c;我为你带来一款高颜值的木饰面电视背景墙设计&#xff0c;它将是你客厅的亮点所在。 1️⃣ 确定背景墙的尺寸和位置 首先&#xff0c;你需要确定背景墙的尺寸和位置&#xff0c;这取决于你家电视的大小和放置位置。…
阅读更多...
重新认识Word——多级列表和项目符号

重新认识Word——多级列表和项目符号

重新认识Word——多级列表和项目符号 多级列表没有运用标题样式但标题格式统一 正式公本文书项目符号和自动编号项目符号自动编号软回车重新起头开始编号解决编号与文本距离过大问题 之前我们重新认识了Word里面的样式&#xff0c;现在的情况就是&#xff0c;我的一些文字已经运…
阅读更多...
Python Authlib库：构建安全可靠的身份验证系统

Python Authlib库：构建安全可靠的身份验证系统

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在现代应用程序中&#xff0c;安全性是至关重要的&#xff0c;特别是在处理用户身份验证时。Authlib库为Python开发者提供了一套强大的工具&#xff0c;用于简化和增强身份验证和授权流程。本文将深入探讨Authli…
阅读更多...
因小失大，一个普通的postman多接口顺序执行，让项目瘫痪了一天

因小失大，一个普通的postman多接口顺序执行，让项目瘫痪了一天

Runner的使用 postman不仅可以单独运行某个接口&#xff0c;postman的 Runner模块可以运行多个接口&#xff0c;可以实现真正意义上的自动化接口测试 Runner的主要功能如下 按顺序调用接口&#xff0c;执行用例&#xff1b; 批量发送请求&#xff1b; 对接口数据进行参数化…
阅读更多...
vuepress-----15、md用法进阶

vuepress-----15、md用法进阶

vuepress markdown说明文档 https://www.vuepress.cn/guide/markdown.html # 示例&#xff1a;封装countUp.js为Vue组件 https://github.com/inorganik/countUp.js https://inorganik.github.io/countUp.js/ # 安装 yarn add countup.js# 创建vue文件 全局Vue组件存放位置…
阅读更多...
＜Linux＞（极简关键、省时省力）《Linux操作系统原理分析之文件管理（1）》（22）

＜Linux＞（极简关键、省时省力）《Linux操作系统原理分析之文件管理（1）》（22）

《Linux操作系统原理分析之文件管理&#xff08;1&#xff09;》&#xff08;22&#xff09; 7 文件管理7.1 文件与文件系统7.1.1 文件7.1.3 文件系统及其功能 7.2 文件的组织结构7.2.1 文件的逻辑结构7.2.2 文件的物理结构一、顺序结构&#xff08;顺序文件或连续文件&#xf…
阅读更多...
Java来实现二叉树算法，将一个二叉树左右倒置（左右孩子节点互换）

Java来实现二叉树算法，将一个二叉树左右倒置（左右孩子节点互换）

文章目录 二叉树算法二叉树左右变换数据 今天来和大家谈谈常用的二叉树算法 二叉树算法 二叉树左右变换数据 举个例子&#xff1a; Java来实现二叉树算法&#xff0c;将一个二叉树左右倒置&#xff08;左右孩子节点互换&#xff09;如下图所示 实现的代码如下&#xff1a;以…
阅读更多...
ECharts的颜色渐变

ECharts的颜色渐变

目录 一、直接配置参数实现颜色渐变 二、使用ECharts自带的方法实现颜色渐变 一、两种渐变的实现方法 1、直接配置参数实现颜色渐变 横向的渐变&#xff1a; //主要代码 option {xAxis: {type: category,boundaryGap: false,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yA…
阅读更多...
云上巴蜀丨云轴科技ZStack成功实践精选（川渝）

云上巴蜀丨云轴科技ZStack成功实践精选（川渝）

巴蜀——古政权必争之地 不仅拥有优越的战略位置 而且拥有丰富的自然资源&#xff0c;悠久的历史文化 如今的川渝经济、人口发展迅速 2023年前三季度&#xff0c;四川与重庆GDP增速均超过国家平均线&#xff0c;为6.5%为5.6% 川渝经济发展带动数字化发展浪潮 云轴科技ZSt…
阅读更多...
打造专属小程序，乔拓云模板平台助力商家抢占先机

打造专属小程序，乔拓云模板平台助力商家抢占先机

打造专属小程序&#xff0c;乔拓云模板平台助力商家抢占先机&#xff01;该平台涵盖全行业小程序模板&#xff0c;一键复制即可上线。 想要快速创建高效实用的小程序&#xff0c;乔拓云小程序模板开发平台为您提供了解决方案&#xff01;我们为您提供一系列精心设计的小程序模板…
阅读更多...
LeetCode Hot100 131.分割回文串

LeetCode Hot100 131.分割回文串

题目&#xff1a; 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是 回文串 。返回 s 所有可能的分割方案。 回文串 是正着读和反着读都一样的字符串。 方法&#xff1a;灵神-子集型回溯 假设每对相邻字符之间有个逗号&#xff0c;那么就看…
阅读更多...
[c++]—string类___深度学习string标准库成员函数与非成员函数(string的增删查改函数）

[c++]—string类___深度学习string标准库成员函数与非成员函数(string的增删查改函数）

沉淀,沉淀,再沉淀. &#x1f469;&#x1f3fb;‍&#x1f4bb;作者:chlorine &#x1f449;上一篇&#xff1a;string标准库成员函数和非成员函数(上) 目录 &#x1f36d;构造和析构的实现 &#x1f36d; string→c类型的字符串数组 &#x1f36d;operator[]类对象元素的访…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023