欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 国际 > 使用vue3+el-form实现动态新增名称,值,并对名称进行必填校验

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

2025/3/18 16:54:29 来源:https://blog.csdn.net/weixin_39893889/article/details/146323620  浏览:    关键词:使用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>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词