如果某些参数没有值,您可以在发送请求之前过滤掉这些空值参数。具体来说,您可以使用 JavaScript 中的delete
关键字,从参数对象中删除值为空的属性。
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="form.username" />
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="form.email" />
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="form.age" />
</el-form-item>
</el-form>
<el-button type="primary" @click="submitForm">提交</el-button>
</div>
</template>
<script>
import { saveUser } from './api';
export default {
data() {
return {
form: {
username: '',
email: '',
age: ''
}
};
},
methods: {
async submitForm() {
try {
// 过滤空值参数
const params = Object.assign({}, this.form);
for (const key in params) {
if (!params[key]) {
delete params[key];
}
}
await saveUser(params);
this.$message.success('保存成功!');
} catch (error) {
console.error(error);
this.$message.error('保存失败,请稍后重试。');
}
}
}
};
</script>
在这个示例中,我们定义了一个名为submitForm
的方法来提交表单。在方法内部,我们使用Object.assign
方法将表单数据复制到一个新的对象中。然后,我们使用for-in
循环遍历这个新对象的属性,并使用delete
关键字删除值为空的属性。最后,我们将这个过滤后的参数对象传递给saveUser
方法。
其他
这些属性的默认值为0也会带来一些问题。你可以将这些属性的默认值设为null,然后在处理提交表单数据时,判断这些属性是否有值,如果有值就将其添加到请求参数中,否则不添加这些属性到请求参数中。
export default {
data() {
return {
queryForm: {
chat_id: 3,
query: '生成新海诚视频电影盘点',
name: '',
config: {
type: 'cot',
query_rewrite: null,
switch: null,
copyright: null,
control: 'general-ttv',
dasou: null
}
}
};
},
methods: {
handleSubmit() {
// 处理需要提交的数据
const dataToSubmit = Object.assign({}, this.queryForm);
const config = dataToSubmit.config;
// 判断config中哪些属性有值,有值就添加到请求参数中
if (config.type) {
params.config.type = config.type;
}
if (config.query_rewrite !== null) {
params.config.query_rewrite = config.query_rewrite;
}
if (config.switch !== null) {
params.config.switch = config.switch;
}
if (config.copyright !== null) {
params.config.copyright = config.copyright;
}
if (config.control) {
params.config.control = config.control;
}
if (config.dasou !== null) {
params.config.dasou = config.dasou;
}
console.log(dataToSubmit);
// 提交数据
}
}
}
上述代码中,我们将query_rewrite
、switch
、copyright
、dasou
四个属性的默认值都设置为null
。在提交表单数据时,我们先将queryForm
对象复制到一个新的对象dataToSubmit
中。然后,我们判断config
中哪些属性有值,有值就将它们添加到请求参数params
中。判断是否有值的条件是,如果属性的值为null
,则表示用户没有选择这个选项,这时就跳过这个属性,不将其添加到请求参数中。