要在 Vue 2 中实现动态创建表单、存储表单结构,并在其他地方加载表单进行数据填报操作,可以按照以下步骤进行。
创建动态表单组件
该组件负责渲染表单,表单结构通过 props 传递。
html
// DynamicForm.vue
<template>
<div>
<form @submit.prevent="handleSubmit">
<div v-for="(field, index) in formFields" :key="index">
<label :for="field.name">{{ field.label }}</label>
<input v-if="field.type === 'text'" :type="field.type" :name="field.name" v-model="formData[field.name]" />
<input v-if="field.type === 'number'" :type="field.type" :name="field.name" v-model="formData[field.name]" />
<!-- 你可以根据需要添加更多的字段类型 -->
</div>
<button type="submit">提交</button>
</form>
</div>
</template>
<script>
export default {
props: {
formFields: {
type: Array,
required: true
}
},
data() {
return {
formData: {}
};
},
methods: {
handleSubmit() {
this.$emit('submit', this.formData);
}
},
watch: {
formFields: {
immediate: true,
handler(newFields) {
this.formData = {};
newFields.forEach(field => {
this.$set(this.formData, field.name, '');
});
}
}
}
};
</script>
创建存储和加载表单结构的方法
可以使用本地存储或通过 API 存储和加载表单结构
javascript
// formService.js
export const saveFormStructure = (key, formStructure) => {
localStorage.setItem(key, JSON.stringify(formStructure));
};
export const loadFormStructure = (key) => {
const formStructure = localStorage.getItem(key);
return formStructure ? JSON.parse(formStructure) : null;
};
创建一个页面用于定义和保存表单结构
&emsp&esmp;提供一个界面让用户输入表单字段,保存到本地存储或发送到服务器
html
// CreateForm.vue
<template>
<div>
<h2>创建表单</h2>
<form @submit.prevent="saveForm">
<div v-for="(field, index) in fields" :key="index">
<label>字段名: <input v-model="field.name" /></label>
<label>标签: <input v-model="field.label" /></label>
<label>类型:
<select v-model="field.type">
<option value="text">文本</option>
<option value="number">数字</option>
</select>
</label>
<button @click="removeField(index)">删除</button>
</div>
<button type="button" @click="addField">添加字段</button>
<button type="submit">保存表单</button>
</form>
</div>
</template>
<script>
import { saveFormStructure } from './formService';
export default {
data() {
return {
fields: [
{ name: '', label: '', type: 'text' }
],
formKey: 'myForm' // 这里可以使用动态表单键
};
},
methods: {
addField() {
this.fields.push({ name: '', label: '', type: 'text' });
},
removeField(index) {
this.fields.splice(index, 1);
},
saveForm() {
saveFormStructure(this.formKey, this.fields);
alert('表单结构已保存');
}
}
};
</script>
创建一个页面加载表单结构并填报数据
加载表单结构并使用 DynamicForm 组件进行渲染和数据提交。
html
// FillForm.vue
<template>
<div>
<h2>填报表单</h2>
<dynamic-form :formFields="formFields" @submit="handleFormSubmit" v-if="formFields.length"></dynamic-form>
</div>
</template>
<script>
import DynamicForm from './DynamicForm.vue';
import { loadFormStructure } from './formService';
export default {
components: {
DynamicForm
},
data() {
return {
formFields: []
};
},
created() {
const formKey = 'myForm'; // 这里可以根据需要动态获取表单键
this.formFields = loadFormStructure(formKey) || [];
},
methods: {
handleFormSubmit(formData) {
console.log('提交的数据:', formData);
// 在这里处理提交的数据,比如发送到服务器
}
}
};
</script>
通过上述步骤,你可以在 Vue 2 项目中实现动态表单的创建、存储和加载,并允许用户在不同的地方填写表单数据。