关于element-ui和ant-design-vue在表单操作方式的不同

最新推荐文章于 2025-07-11 17:34:59 发布

原创最新推荐文章于 2025-07-11 17:34:59 发布 · 966 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #ui #javascript

本文比较了ElementUI和AntDesignVue在创建表单对象、获取数据、赋值和置空方面的差异，强调了两者通过ref属性和特定方法进行操作的不同点。

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 名称。