element plus表单数据回显
时间: 2023-07-31 17:03:38 浏览: 162
在 Element Plus 中,可以使用 `el-form` 和 `el-form-item` 组件来创建表单,并通过绑定数据来实现表单数据的回显。以下是一个示例:
```html
<template>
<el-form :model="formData" ref="form" label-width="100px">
<el-form-item label="姓名">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input-number v-model="formData.age"></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
formData: {
name: '', // 表单项的初始值
age: null,
},
};
},
methods: {
submitForm() {
// 提交表单时的逻辑处理
console.log(this.formData);
},
},
};
</script>
```
在上面的示例中,`formData` 对象保存了表单数据。通过 `v-model` 指令与表单项绑定,当用户在表单项中输入数据时,`formData` 会自动更新。当用户提交表单时,可以在 `submitForm` 方法中获取 `formData` 对象来处理表单数据。
注意:在实际应用中,你可以根据需要使用其他 Element Plus 的表单组件和验证规则来构建更复杂的表单。