使用vue3+el-form实现动态新增名称，值，并对名称进行必填校验

使用vue3+el-form实现动态新增名称，值，并对名称进行必填校验

效果图

代码

<template><el-form :model="form" :rules="rules" ref="dynamicForm"><!-- 动态添加的名称和值 --><el-row v-for="(item, index) in form.items" :key="index"><el-col :span="8"><el-form-item :prop="'items.' + index + '.key'" :rules="rules.key"><el-input v-model="item.key" placeholder="请输入" :disabled="disabled"></el-input></el-form-item></el-col><el-col :span="8"><el-form-item><el-input v-model="item.value" placeholder="请输入" :disabled="disabled"></el-input></el-form-item></el-col><el-col :span="8"><el-button @click="addItem(index)" :disabled="disabled">+</el-button><el-button type="danger" @click="removeItem(index)" :disabled="disabled">-</el-button></el-col></el-row><!-- 添加按钮 --><!--    <el-button type="primary" @click="addItem">Add Item</el-button>--><!-- 提交按钮 --><!--    <el-button type="success" @click="submitForm">Submit</el-button>--></el-form>
</template><script setup name="dynamicsForm">
import { ref, reactive, defineProps, watch } from 'vue'
const props = defineProps({defaultData: {type: [Object, Array]},disabled: {type: Boolean,default: false}
})
const dynamicForm = ref(null) // 表单引用
const form = reactive({items: [] // 动态表单项
})const rules = reactive({key: [{ required: true, message: '请输入', trigger: 'blur' }]
})// 添加表单项
const addItem = index => {// form.items.push({ key: '', value: '' });form.items.splice(index + 1, 0, { key: '', value: '' })
}// 移除表单项
const removeItem = index => {form.items.splice(index, 1)
}// 提交表单
const submitForm = () => {dynamicForm.value.validate(valid => {if (valid) {alert('Form submitted successfully!')console.log('Form Data:', form.items)} else {alert('Form validation failed!')return false}})
}
// 校验表单
const validateForm = async () => {const result = {status: true,data: form.items}result.status = await dynamicForm.value.validate()return result
}
watch(() => props.defaultData,val => {form.items = val && val.length > 0 ? val : [{ key: '', value: '' }]},{immediate: true}
)
defineExpose({validateForm
})
</script><style scoped>
.el-form-item {margin-bottom: 20px;
}
</style>