element ui 显示表单变动

如何实时获取表单数据？

要实现实时获取表单数据，您可以使用Element UI中的表单组件提供的事件监听器。相应的，您需要为表单组件添加@change事件监听器。在事件处理函数中，您可以通过this.$refs.form.validate() 方法来触发表单组件的校验器，并获取到表单数据。以下是一个简单的示例代码：

<template>
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" @change="handleChange('username')"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password" @change="handleChange('password')"></el-input>
</el-form-item>
</el-form>
</template>

<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
};
},
methods: {
handleChange(name) {
this.$refs.form.validate((valid) => {
if (valid) {
console.log(`表单数据 ${name} 值为: ${this.form[name]}`);
}
});
}
}
};
</script>

在上述代码中，我们为表单组件中的所有输入框添加了@change事件监听器，并指定了handleChange方法来处理事件。在handleChange方法中，我们首先通过this.$refs.form.validate()方法来触发表单组件的校验器，并在回调函数中判断表单数据是否符合校验规则。如果通过了校验，我们可以使用this.form对象来获取表单数据，并进行后续的数据处理。