使用Vue构建动态表单生成器的实现步骤
6人参与 • 2025-04-24 • Javascript
引言
在前端开发中，表单是非常常见的交互元素。然而，当表单的结构和字段需要根据不同的业务场景动态变化时，手动编写每个表单的代码会变得非常繁琐。vue 作为一个流行的前端框架，提供了强大的组件化和动态渲染能力，结合 vuelidate 库进行表单校验，我们可以轻松实现一个动态表单生成器。本文将详细介绍实现动态表单生成器的原理，并通过实战演示如何使用 vue 构建一个灵活的动态表单。
原理分析
动态组件渲染
vue 提供了component标签，通过 :is 属性可以动态指定要渲染的组件。结合 v-for 指令，我们可以遍历 json 配置对象，根据配置中的组件类型动态渲染不同的表单项。例如：
<template>
<div v-for="item in formconfig" :key="item.name">
<label :for="item.name">{{ item.name }}</label>
<component :is="getcomponent(item.type)"
v-model="formdata[item.name]"
v-bind="item.props"
/>
</div>
</template>
在上述代码中，getcomponent 方法根据 item.type 返回对应的组件，从而实现动态渲染。
表单校验
为了确保用户输入的数据符合业务规则，我们需要对表单进行校验。vuelidate 是一个轻量级的 vue 表单验证库，它提供了丰富的验证规则和便捷的使用方式。我们可以根据 json 配置中的 rule 字段动态生成校验规则，并使用 usevuelidate 函数对表单数据进行校验。例如：
const getrules = () => {
const rules = {};
formconfig.value.foreach(i => {
if (i.rule) {
rules[i.name] = {};
if (i.rule.required === 'required') {
rules[i.name].required = required;
}
if (i.rule.maxlength) {
rules[i.name].maxlength = maxlength(i.rule.maxlength);
}
if (i.rule.minlength) {
rules[i.name].minlength = minlength(i.rule.minlength);
}
}
});
return rules;
};
const rules = getrules();
const v$ = usevuelidate(rules, formdata);
插槽机制实现自定义表单项
vue 的插槽机制允许我们在组件内部预留一些位置，让使用者可以自定义插入内容。在动态表单生成器中，我们可以使用具名插槽，让用户自定义表单的提交按钮或其他特定的表单项。例如：
<template>
<form @submit.prevent="handlesubmit">
<!-- 动态渲染表单项 -->
<div v-for="item in formconfig" :key="item.name">
<label :for="item.name">{{ item.name }}</label>
<component :is="getcomponent(item.type)"
v-model="formdata[item.name]"
v-bind="item.props"
/>
</div>
<slot name="submit">
<button @click="handlesubmit">submit</button>
</slot>
</form>
</template>
实战演示
项目初始化
首先，我们需要创建一个新的 vue 项目，并安装所需的依赖。可以使用 vite 快速搭建项目：
npm init vite@latest dynamic-form -- --template vue cd dynamic-form npm install npm install @vuelidate/core @vuelidate/validators
编写组件
1. dynamicform.vue 组件
该组件是动态表单生成器的核心组件，负责解析 json 配置并渲染表单。同时，增加了表单数据提交和处理的逻辑。
<template>
<form @submit.prevent=handlesubmit>
<div v-for="item in formconfig" :key="item.name">
<label :for="item.name">{{ item.name }}</label>
<component :is="getcomponent(item.type)"
v-model="formdata[item.name]"
v-bind="item.props"
/>
</div>
<slot name="submit">
<button @click="handlesubmit">submit</button>
</slot>
</form>
</template>
<script setup>
import {reactive, ref} from 'vue'
import { usevuelidate } from '@vuelidate/core'
import { required,maxlength } from '@vuelidate/validators'
import textrenderer from './textrenderer.vue'
import selectrenderer from './selectrenderer.vue'
import daterenderer from './daterenderer.vue'
const formdata=reactive({})
const props = defineprops({
formconfigjson:{
type:string,
required:true,
validator: (configjson) =>{
const config=json.parse(configjson)
return config.every((i)=>'name' in i && 'type' in i)
},
}
})
const formconfig=ref(json.parse(props.formconfigjson))
const componenttypemap={
'text':textrenderer,
'select':selectrenderer,
'date-range':daterenderer,
}
const getcomponent=(type)=>{
return componenttypemap[type]
}
const handlesubmit = () => {
v$.value.$validate();
if (v$.value.$invalid) {
console.log('表单验证不通过', v$.value.$errors);
return;
}
console.log('form submitted:', formdata)
}
const getrules=()=>{
const rules={}
formconfig.value.foreach(i=>{
if(i.rule){
rules[i.name]={}
if(i.rule.required==='required'){
rules[i.name].required=required
}
if (i.rule.maxlength) {
rules[i.name].maxlength = maxlength(i.rule.maxlength)
}
if (i.rule.minlength) {
rules[i.name].minlength = minlength(i.rule.minlength)
}
}
})
console.log('rules:', rules)
return rules
}
const rules=getrules()
const v$ = usevuelidate(rules, formdata);
</script>
<style scoped>
form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
div {
margin-bottom: 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
label {
font-weight: 500;
color: #333;
font-size: 14px;
}
input, select {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
width: 100%;
box-sizing: border-box;
}
input:focus, select:focus {
outline: none;
border-color: #409eff;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}
button {
padding: 10px 20px;
background-color: #409eff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
button:hover {
background-color: #66b1ff;
}
</style>
2. textrenderer.vue 组件
该组件用于渲染文本输入框。
<script setup>
defineprops(['modelvalue']);
const emit = defineemits(['update:modelvalue']);
</script>
<template>
<input type="text" :value="modelvalue" @input="emit('update:modelvalue', $event.target.value)">
</template>
<style scoped></style>
3. selectrenderer.vue 组件
该组件用于渲染下拉选择框。
<script setup>
defineprops(['modelvalue', 'selections']);
const emit = defineemits(['update:modelvalue']);
</script>
<template>
<select :value="modelvalue" @change="emit('update:modelvalue', $event.target.value)">
<option v-for="item in selections" :key="item.value" :value="item.value">{{ item.selection }}</option>
</select>
</template>
<style scoped></style>
错误记录
defineemits 使用错误：defineemits 接收的参数应该是一个数组，这里没有使用数组包裹事件名。
@select 事件使用错误：在 <select> 元素上，通常使用 @change 事件来监听选择项的变化，而不是 @select
4. daterenderer.vue 组件
该组件用于渲染日期选择框。
<script setup>
defineprops(['modelvalue']);
const emit = defineemits(['update:modelvalue']);
</script>
<template>
<input type="date" :value="modelvalue" @input="$emit('update:modelvalue', $event.target.value)">
</template>
<style scoped></style>
使用动态表单组件
在 app.vue 中使用 dynamicform 组件，并传入 json 配置。
<script setup>
import { ref } from 'vue';
import dynamicform from './components/dynamicform.vue';
const config = [
{
"name": "username",
"type": "text",
"rule": {"required": "required"},
},
{
"name": "userid",
"type": "text",
"rule": {"required": "required", "maxlength": "6"},
},
{
"name": "date",
"type": "date-range",
"rule": { "required": "required" },
},
{
"name": "gender",
"type": "select",
"props": {
"selections": [
{ "value": "male", "selection": "male" },
{ "value": "female", "selection": "female" }
]
},
"rule": { "required": "required" },
}
];
const configjson = json.stringify(config);
</script>
<template>
<dynamicform :formconfigjson="configjson"/>
</template>
<style scoped></style>
问题
@submit.prevent
在 vue.js 中，@submit.prevent 是一个事件绑定语法。 @submit 用于监听 html 表单的 submit 事件，当用户提交表单（比如点击表单内的提交按钮）时会触发该事件。 .prevent 是一个修饰符，它的作用是调用 event.preventdefault() 方法，阻止表单的默认提交行为。在默认情况下，表单提交会导致页面刷新，使用 .prevent 修饰符后就可以避免页面刷新，从而让开发者可以在 javascript 中自定义处理表单提交的逻辑，比如通过 ajax 发送表单数据到服务器等。 例如：
<template> <form @submit.prevent="handlesubmit">
<input type="text" v-model="formdata.name"> <input type="submit" value="提交">
</form>
</template>
<script>
export default {
data()
{ return { formdata: { name: '' } };
},
methods: { handlesubmit() {
// 在这里处理表单提交的逻辑，比如发送数据到服务器 console.log('表单提交了', this.formdata); }
}
};
</script>
在上述代码中，@submit.prevent 会阻止表单的默认提交行为，然后调用 handlesubmit 方法来处理表单提交。
component标签是怎么用的
在不同的前端框架里， 标签的使用方式有所不同，下面主要介绍 vue.js 和 react 中 标签的使用。
vue.js 里 标签的使用
在 vue.js 中， 标签是一个动态组件，可依据不同条件来渲染不同的组件。
基本用法
你可以借助 :is 绑定一个组件名或者组件选项对象，以此来动态渲染组件。
错误用法
'text': 'inputrenderer', 'select': 'selectrenderer', 'date-range': 'daterangerenderer'
解释
:is 绑定的 currentcomponent 是一个变量，其值为组件名。
当点击按钮时，currentcomponent 的值会发生改变，从而动态渲染不同的组件。
input的type有哪些
v-bind绑定对象
v-bind="item.props" 是对象展开写法，会自动将item.props对象中的每个属性绑定为组件的props。 完整语法是 v-bind:attributename="expression"
<component
:is="getcomponent(item.type)"
v-model="formdata[item.name]"
v-bind="item.props" />
其中item.props={
selections: [
{ value: male, selection: male },
{ value: female, selection: female }
]
}
v-bind="item.props"等价于v-bind:selections=item.props.selections
总结
通过以上步骤，我们成功实现了一个 vue 动态表单生成器。利用 vue 的动态组件渲染、表单校验和插槽机制，我们可以根据不同的 json 配置动态生成表单，并对用户输入的数据进行校验。同时，增加了表单数据提交和处理的逻辑，模拟了将表单数据发送到后端的过程。这种方式大大提高了表单开发的灵活性和可维护性，减少了重复代码的编写。
以上就是使用vue构建动态表单生成器的实现步骤的详细内容，更多关于vue动态表单生成器的资料请关注代码网其它相关文章！
赞 (0)
打赏
微信扫一扫
微信扫一扫
您想发表意见！！点此发布评论
发表评论