Element-UI 实现动态增加多个不同类型的输入框并校验（双重v-for表单验证）

**Element-UI 实现动态增加多个不同类型的输入框并校验**

在实际开发中，我们经常需要实现一个功能：用户可以动态添加多个相同或不同的表单项，例如输入框、选择器、复选框等。同时，还需要对这些表单项进行验证。在 Element-UI 中，可以使用双重 v-for 来实现这个功能。

**第一步：定义表单结构**

首先，我们需要定义一个表单结构的 JSON 对象，来描述每个表单项的类型和属性。

jsonconst formStructure = [
 {
 label: '输入框',
 type: 'input',
 props: {
 placeholder: '请输入内容'
 }
 },
 {
 label: '选择器',
 type: 'select',
 props: {
 options: [
 { value: '选项1', label: '选项1' },
 { value: '选项2', label: '选项2' }
 ]
 }
 },
 {
 label: '复选框',
 type: 'checkbox',
 props: {}
 }
]

html<template>
 <div>
 <!-- 表单结构 -->
 <el-form :model="form" ref="form">
 <el-row v-for="(item, index) in formStructure" :key="index">
 <el-col :span="12">
 <el-form-item :label="item.label" :prop="'fields.' + index + '.value'">
 <!-- 根据类型渲染不同的表单项 -->
 <template v-if="item.type === 'input'">
 <el-input v-model="form.fields[index].value" :placeholder="item.props.placeholder"></el-input>
 </template>
 <template v-else-if="item.type === 'select'">
 <el-select v-model="form.fields[index].value" :placeholder="item.props.placeholder">
 <el-option v-for="(option, index) in item.props.options" :key="index" :label="option.label" :value="option.value"></el-option>
 </el-select>
 </template>
 <template v-else-if="item.type === 'checkbox'">
 <el-checkbox-group v-model="form.fields[index].value">
 <el-checkbox v-for="(option, index) in item.props.options" :key="index" :label="option.value"></el-checkbox>
 </el-checkbox-group>
 </template>
 </el-form-item>
 </el-col>
 </el-row>
 </el-form>
 </div>
</template>

<script>
export default {
 data() {
 return {
 form: {
 fields: []
 }
 }
 },
 mounted() {
 // 初始化表单结构 this.form.fields = JSON.parse(JSON.stringify(this.formStructure));
 }
}
</script>

html<template>
 <div>
 <!-- 表单结构 -->
 <el-form :model="form" ref="form">
 <!-- 双重 v-for 验证 -->
 <el-row v-for="(item, index) in form.fields" :key="index">
 <el-col :span="12">
 <el-form-item :label="item.label" :prop="'fields.' + index + '.value'">
 <!-- 根据类型渲染不同的表单项 -->
 <template v-if="item.type === 'input'">
 <el-input v-model="form.fields[index].value" :placeholder="item.props.placeholder"></el-input>
 </template>
 <template v-else-if="item.type === 'select'">
 <el-select v-model="form.fields[index].value" :placeholder="item.props.placeholder">
 <el-option v-for="(option, index) in item.props.options" :key="index" :label="option.label" :value="option.value"></el-option>
 </el-select>
 </template>
 <template v-else-if="item.type === 'checkbox'">
 <el-checkbox-group v-model="form.fields[index].value">
 <el-checkbox v-for="(option, index) in item.props.options" :key="index" :label="option.value"></el-checkbox>
 </el-checkbox-group>
 </template>
 </el-form-item>
 </el-col>
 </el-row>
 </el-form>
 </div>
</template>

<script>
export default {
 data() {
 return {
 form: {
 fields: []
 }
 }
 },
 mounted() {
 // 初始化表单结构 this.form.fields = JSON.parse(JSON.stringify(this.formStructure));
 },
 methods: {
 submitForm() {
 // 双重 v-for 验证 for (let i =0; i < this.form.fields.length; i++) {
 const item = this.form.fields[i];
 if (!item.value) {
 this.$message.error(`表单项 ${item.label} 必须填写`);
 return false;
 }
 }
 // 表单提交 console.log(this.form);
 return true;
 }
 }
}
</script>