【区分vue2和vue3下的element UI Form 表单组件，分别详细介绍属性，事件，方法如何使用，并举例】

在Vue 2中，我们通常使用Element UI的表单组件，而在Vue 3中，由于Element UI本身并未直接支持Vue 3，我们通常会使用Element Plus作为替代，它是Element UI的Vue 3版本。下面我将分别介绍Vue 2下Element UI Form和Vue 3下Element Plus Form的属性、事件和方法。

Vue 2 + Element UI Form

属性 (Attributes)

model: 一个对象，包含了表单字段的数据。
rules: 一个包含了验证规则的对象。
inline: 是否为行内表单模式。
label-position: 表单域标签的位置，可选值为left、right、top。
label-width: 表单域标签的宽度，例如'120px'。
label-suffix: 标签的后缀。
show-message: 是否显示校验错误信息。
size: 表单尺寸，可选值为medium、small、mini。

事件 (Events)

submit: 提交表单时触发。
validate: 验证表单时触发。

方法 (Methods)

通常不直接调用Form组件的方法，而是通过this.$refs[formRef].validate()进行表单验证。

示例

vue 复制代码

<template>
  <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
    <el-button type="primary" @click="submitForm('formRef')">提交</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        // 其他字段
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        // 其他规则
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          console.log('验证失败!');
          return false;
        }
      });
    }
  }
};
</script>

Vue 3 + Element Plus Form

属性 (Attributes)

与Vue 2的Element UI Form类似，但可能有所增减或调整。
具体的属性列表请参考Element Plus的官方文档。

事件 (Events)

与Vue 2的Element UI Form类似，但可能有所增减或调整。

方法 (Methods)

Element Plus可能提供了更多的方法或修改了现有方法的行为。
同样，具体的方法列表请参考Element Plus的官方文档。

示例 (使用Composition API)

vue 复制代码

<template>
  <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const form = ref({
      username: '',
      // 其他字段
    });
    const rules = ref({
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ],
      // 其他规则
    });

    const submitForm = () => {
      const formRef = ref(null); // 注意：这里通常不需要在setup中声明ref，而是在模板中直接使用ref="formRef"
      formRef.value.validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          console.log('验证失败!');
          return false;
        }
      });
    };

    // 注意：在Composition API中，ref变量直接在模板中使用，不需要在setup中返回