编辑表单时,怎么手动提交数据

表单中需要动态添加输入框,如点击添加按钮就添加一条记录


代码如下

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个回答默认排序 投票数排序
bayod
bayod
这家伙很懒,什么也没写~
1天前

收藏备用

请先登录
0
1
0
1