Element Plus 获得 表单值
时间: 2024-01-18 07:05:16 浏览: 149
在 Element Plus 中,可以通过 `this.$refs.formRef.model` 来获取表单数据。其中,`formRef` 是表单组件的 `ref` 属性。
以下是一个示例代码:
```html
<template>
<el-form :model="form" :rules="rules" ref="formRef">
<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>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
age: ''
},
rules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须为数字值' }
]
}
}
},
methods: {
submitForm() {
console.log(this.$refs.formRef.model); // 获取表单数据
}
}
}
</script>
```
在上述代码中,我们通过 `this.$refs.formRef.model` 来获取表单数据,其中 `formRef` 是表单组件的 `ref` 属性。在 `submitForm` 方法中,我们可以通过 `console.log()` 打印出表单数据。
阅读全文