在el-form中新增一个伪字段不提交到后端
时间: 2023-05-21 12:01:49 浏览: 208
可以使用 el-form 的 hidden 属性来实现新增一个伪字段不提交到后端,具体代码如下:
<el-form :model="form" ref="form" label-width="80px">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
<el-form-item label="伪字段" hidden>
<el-input v-model="form.fake"></el-input>
</el-form-item>
</el-form>
在这个例子中,我们新增了一个名为 fake 的伪字段,使用 hidden 属性来隐藏该字段,这样就可以在前端使用该字段,但不会提交到后端。
相关问题
在el-form中新增一个伪字段
可以通过在 el-form 中添加一个 hidden 类型的表单项来实现伪字段的效果,代码如下:
<el-form :model="form" ref="form" label-width="80px">
<el-form-item label="真实字段">
<el-input v-model="form.realField"></el-input>
</el-form-item>
<el-form-item label="伪字段" v-show="false">
<el-input v-model="form.fakeField"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
在上面的代码中,我们添加了一个 v-show="false" 的 el-form-item,使其不可见。这个表单项的类型是 el-input,可以通过 v-model 绑定到 form 对象的 fakeField 属性上,从而实现伪字段的效果。在提交表单时,我们只需要提交真实字段即可。
注意:这里的代码仅供参考,具体实现方式可能因项目需求而异。
如何在el-form中新增一个可填的字段, 但不带到后端
您可以在el-form中添加一个不带到后端的可填字段,方法是在el-form-item中添加一个自定义的输入框,然后在提交表单时忽略该字段即可。以下是一个示例代码:
```
<el-form :model="form" ref="form">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="自定义字段">
<el-input v-model="form.customField"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
form: {
name: '',
customField: ''
}
}
},
methods: {
submitForm() {
// 忽略customField字段
const { customField, ...data } = this.form
console.log(data)
// 提交表单
}
}
}
</script>
```
在这个示例中,我们在el-form中添加了一个自定义的输入框,用于输入不带到后端的可填字段。在提交表单时,我们使用ES6的解构语法忽略了customField字段,只提交了其他字段的数据。
阅读全文