popupForm.vue组件表单提交字段缺失表单
<template>
<!-- 对话框表单 -->
<el-dialog
class="ba-operate-dialog"
:close-on-click-modal="false"
:model-value="['Add', 'Edit'].includes(baTable.form.operate!)"
@close="baTable.toggleForm"
:destroy-on-close="true"
>
<template #header>
<div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
{{ baTable.form.operate ? t(baTable.form.operate) : '' }}
</div>
</template>
<el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
<div
class="ba-operate-form"
:class="'ba-' + baTable.form.operate + '-form'"
:style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
>
<el-form
ref="formRef"
@keyup.enter="baTable.onSubmit(formRef)"
:model="baTable.form.items"
label-position="right"
:label-width="baTable.form.labelWidth + 'px'"
v-if="!baTable.form.loading"
>
<FormItem
type="remoteSelect"
prop="menu_id"
label="所属栏目"
v-model="baTable.form.items!.menu_id"
:placeholder="t('Click select')"
:input-attr="{
params: { isTree: true,initValue: menu_id },
field: 'title',
'remote-url': '/admin/indexLayout.Menu/index',
}"
/>
<FormItem
label="标题"
v-model="baTable.form.items!.title"
type="string"
prop="title"
placeholder="请输入标题"
/>
<FormItem
label="SEO标题"
v-model="baTable.form.items!.seo_title"
type="string"
prop="seo_title"
placeholder="请输入SEO标题"
/>
<FormItem label="图片" type="image" v-model="baTable.form.items!.image" />
<FormItem
label="关键词"
v-model="baTable.form.items!.keywords"
type="textarea"
prop="keywords"
placeholder="请输入关键词,每个词注意用英文逗号隔开"
/>
<FormItem
label="内容摘要"
v-model="baTable.form.items!.description"
type="textarea"
prop="description"
placeholder="请输入内容摘要"
/>
<FormItem
label="内容主体"
v-model="baTable.form.items!.content"
type="editor"
prop="content"
placeholder="请输入内容"
/>
<FormItem
label="跳转链接"
v-model="baTable.form.items!.url"
type="string"
prop="url"
placeholder="请输入跳转链接"
/>
<FormItem
:label="t('State')"
v-model="baTable.form.items!.status"
type="radio"
:data="{ content: { '0': t('Disable'), '1': t('Enable') }, childrenAttr: { border: true } }"
/>
<el-form-item label="权重">
<el-input
v-model="baTable.form.items!.weigh"
type="number"
placeholder="请输入权重(排序依据)"
></el-input>
</el-form-item>
</el-form>
</div>
</el-scrollbar>
<template #footer>
<div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
<el-button @click="baTable.toggleForm('')">{{ t('Cancel') }}</el-button>
<el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
{{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') : t('Save') }}
</el-button>
</div>
</template>
</el-dialog>
</template>
cleanXss
import { ref, inject } from 'vue'
import { useI18n } from 'vue-i18n'
import baTableClass from '/@/utils/baTable'
import type { FormInstance } from 'element-plus'
import FormItem from '/@/components/formItem/index.vue'
import { useRouter } from "vue-router";
const router = useRouter();
const menu_id = router.currentRoute.value.query.menu_id
const formRef = ref<FormInstance>()
const baTable = inject('baTable') as baTableClass
const { t } = useI18n()
cleanXss
<style scoped lang="scss">
.avatar-uploader {
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: var(--el-border-radius-small);
box-shadow: var(--el-box-shadow-light);
border: 1px dashed var(--el-border-color);
cursor: pointer;
overflow: hidden;
width: 110px;
height: 110px;
}
.avatar-uploader:hover {
border-color: var(--el-color-primary);
}
.avatar {
width: 110px;
height: 110px;
display: block;
}
.image-slot {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
</style>
添加和编辑都是调用的这个组件,但是在添加的时候提交的参数缺少了menu_id字段,编辑时正常,这是为什么呢?前端菜鸟,还望大佬赐教,,,
2个回答默认排序 投票数排序
jayip
-
1年前
打印baTable.form.items看看
另截图看看你提交前的form
Zxcvbnm回复jayip
这家伙很懒,什么也没写~
1年前
已解决,谢谢回复~
洛萨
这家伙很懒,什么也没写~
1年前
字段值不能为null,否则提交后就被后端过滤掉
请先登录
提交时网络请求的载荷截图看看
看起来,你提交的数据中,并没有
menu_id
,baTable的提交表单函数,默认将提交整个baTable.form.items
对象,或许你在提交前钩子删掉了它?解决了,在列表页给这个字段加上默认值即可