1、在创建表单上
——Element UI:
在Element UI中,可以使用<el-form>组件的 ref 属性来获取表单对象。通过在组件中使用 this.$refs.xxx来访问该表单对象。
例如
<template>
<el-form ref="form">
<!-- 表单项 -->
</el-form>
</template>
<script>
export default {
mounted() {
const form = this.$refs.form; // 获取表单对象
// 可以通过 form 进行表单操作
},
// 其他组件配置
};
</script>
——Ant Design Vue:
在Ant-design-vue中可以使用 Form.createForm方法来创建一个表单对象,并将其绑定到组件实例上,通过在组件中使用 this.$form 来访问该表单对象,例如:
<template>
<a-form :form="form">
<!-- 表单项 -->
</a-form>
</template>
<script>
import { Form } from 'ant-design-vue';
export default {
data() {
return {
form: null, // 表单对象
};
},
mounted() {
this.form = this.$form.createForm(this); // 创建表单对象并绑定到组件实例
// 可以通过 this.form 进行表单操作
},
// 其他组件配置
};
</script>
总之两者的区别在于获取表单对象的方式上。Element UI使用 ref 属性来获取,而Ant Design Vue使用 Form.createForm 方法来创建并绑定到组件实例上。
2、在表单数据获取上
——Element UI:通过 this.$refs.formName.model 可以获取整个表单的数据对象,其中 formName为表单组件的ref名称。
——Ant Design Vue:通过 this.$refs.formName.getFieldsValue() 方法可以获取整个表单的数据对象,其中 formName 是表单组件的 ref 名称。
3、在表单赋值上
——Element UI:通过给表单组件的 model 属性赋值来实现表单赋值。例如:this.$refs.formName.model = formData,其中' formName' 是表单组件的ref名称
——Ant Design Vue:通过给表单组件的 setFieldsValue 方法传入数据对象来实现表单赋值。例如: this.$refs.formName.setFieldsValue(formData),其中 formName 是表单组件的ref名称,formData 是要赋值的数据对象。
4、在表单置空上
——Element UI:通过给表单组件的model属性赋值一个空对象来实现表单置空。例如 this.$refs.formName.model = {},其中 formName 是表单组件的 ref 名称
——Ant Design Vue:通过给表单组件的 resetFields 方法来实现表单置空。例如:this.$refs.formName.resetFields() ,其中 formName 是表单组件的ref 名称。