编辑表单时,怎么手动提交数据
表单中需要动态添加输入框,如点击添加按钮就添加一条记录
代码如下
js
<el-form-item label="学历信息" >
<el-form-item
v-for="(value) in dynamicProductForm"
:key="value.key"
class="ffff"
style="width: 100% !important;margin-top:5px"
>
<el-row :gutter="12" style="margin-left: 0px;">
<el-col :span="5">
<el-input v-model="value.edu" placeholder="学历" />
</el-col>
<el-col :span="7">
<el-input v-model="value.school" placeholder="毕业院校" />
</el-col>
<el-col :span="7">
<el-input v-model="value.major" placeholder="所学专业" />
</el-col>
<el-col :span="3">
<el-button
type="danger"
style="margin-left: -5px;"
@click.prevent="removeProduct(value)"
:disabled="dynamicProductForm.length <= 1 "
>
删除
</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form-item>
<el-form-item >
<el-button type="primary" @click="addProduct">新增学历</el-button>
</el-form-item>
js部分
js
interface EducationItem {
key: number
edu: string // 学历
school: string // 毕业院校
major: string // 所学专业
}
const dynamicProductForm = ref<EducationItem[]>([
{
key: Date.now(),
edu: '',
school: '',
major: ''
}
])
const addProduct = () => {
dynamicProductForm.value.push({
key: Date.now(),
edu: '',
school: '',
major: ''
})
}
const removeProduct = (item: EducationItem) => {
const index = dynamicProductForm.value.indexOf(item)
if (index !== -1) {
dynamicProductForm.value.splice(index, 1)
}
}
const isInitialized = ref(false)
// 监听 baTable.form.items 数据变化,初始化 dynamicProductForm
watchEffect(() => {
if (!baTable.form.loading && !isInitialized.value) {
if (baTable.form.items!.background?.edulist) {
const list = baTable.form.items!.background.edulist
if (list.length > 0) {
dynamicProductForm.value = [...list]
} else {
dynamicProductForm.value = [
{
key: Date.now(),
edu: '',
school: '',
major: ''
}
]
}
} else {
dynamicProductForm.value = [
{
key: Date.now(),
edu: '',
school: '',
major: ''
}
]
}
isInitialized.value = true
}
})
此时我需要手动验证数据和提交数据
js
baTable.onSubmit = (formRef: FormInstance | undefined) => {
if (!formRef) return
// 同步学历信息到 baTable.form.items.background.edulist
if (!baTable.form.items!.background) {
baTable.form.items!.background = {}
}
baTable.form.items!.background.edulist = dynamicProductForm.value.map(({ key, ...rest }) => rest)
formRef.validate((valid) => {
if (valid) {
// 显示加载状态
baTable.form.submitLoading = true
createAxios({
url: '/admin/user.Info/edit',
method: 'post',
data: baTable.form.items,
}).then((res) => {
if (res.code == 1) {
baTable.toggleForm()
ElMessage.success(res.msg)
} else {
ElMessage.error(res.msg || '提交失败')
}
}).catch((err) => {
ElMessage.error('网络异常或服务器错误')
console.error(err)
}).finally(() => {
baTable.form.submitLoading = false
})
} else {
ElMessage.warning('请检查表单填写是否正确')
return false
}
})
}
请问有更简洁的方法吗
请先登录
等待解答
热门问题
收藏备用
- 1
前往