<el-form> ref属性的使用可以举个例子吗
时间: 2023-12-02 10:06:23 浏览: 24
当我们在 Vue 中使用表单时,可以通过 `ref` 属性来获取表单中的数据或者执行一些表单操作。例如,我们可以在 `<el-form>` 标签上加上 `ref` 属性,然后在 Vue 实例中通过 `$refs` 对象来获取表单数据或者执行一些表单操作。
下面是一个简单的例子:
```html
<template>
<div>
<el-form ref="myForm">
<el-form-item label="姓名">
<el-input v-model="name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
name: "",
age: ""
};
},
methods: {
submitForm() {
const form = this.$refs.myForm;
console.log(form); // 打印表单对象
console.log(this.name, this.age); // 打印表单数据
}
}
};
</script>
```
在上面的例子中,我们通过 `ref` 属性给表单设置了一个名称 `myForm`,然后在 `submitForm` 方法中通过 `this.$refs.myForm` 获取了表单对象,并通过 `console.log` 打印了表单数据。