el-form-item如何设置某一个字段为字符串加id的值
时间: 2023-06-17 16:02:40 浏览: 91
你可以使用 `:prop` 属性来指定 `el-form-item` 绑定的表单字段名,然后在表单提交时将该字段的值设置为字符串加 id 的形式。
具体操作如下:
1. 在模板中使用 `el-form` 和 `el-form-item` 组件创建表单。
```html
<template>
<el-form ref="form" :model="formData" label-width="100px">
<el-form-item label="名称" :prop="'nameWithId'">
<el-input v-model="formData.name" placeholder="请输入名称"></el-input>
</el-form-item>
...
</el-form>
</template>
```
2. 在 `data` 中定义表单数据对象 `formData`,并在其中添加 `name` 和 `nameWithId` 两个属性。
```js
export default {
data() {
return {
formData: {
name: '',
nameWithId: ''
}
}
},
...
}
```
3. 在表单提交时,将 `nameWithId` 的值设置为字符串加 id 的形式,例如 `name-123`。
```js
export default {
methods: {
onSubmit() {
this.formData.nameWithId = `${this.formData.name}-${123}`;
// 提交表单数据
}
},
...
}
```
这样,当用户填写表单时,`name` 字段将保存用户输入的名称,而 `nameWithId` 字段将保存字符串加 id 的形式,例如 `name-123`。
阅读全文