【区分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: 表单域标签的位置,可选值为leftrighttop
  • label-width: 表单域标签的宽度,例如'120px'
  • label-suffix: 标签的后缀。
  • show-message: 是否显示校验错误信息。
  • size: 表单尺寸,可选值为mediumsmallmini
事件 (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中返回
    
相关推荐
k09332 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
web行路人33 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00134 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼9211 小时前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
不秃头的UI设计师1 小时前
UI界面设计入门:打造卓越用户体验
ui·ux·ui设计
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫2 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
落魄小二2 小时前
el-table 表格索引不展示问题
javascript·vue.js·elementui
y5236482 小时前
Javascript监控元素样式变化
开发语言·javascript·ecmascript