Vue.js + Element UI表单组件应用

Vue.js + Element UI 表单组件应用

将演示如何利用 Vue.js 框架和 Element UI 组件库创建基础表单。我们将涵盖表单元素的定义、数据绑定、表单验证以及提交等核心功能。

<template>
  <el-form :model="formData" :rules="formRules" label-width="100px" ref="formRef">
    <el-form-item label="用户名" prop="username">
      <el-input placeholder="请输入用户名" v-model="formData.username">el-input>
    el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input placeholder="请输入密码" type="password" v-model="formData.password">el-input>
    el-form-item>
    <el-form-item>
      <el-button @click="onSubmit" type="primary">提交el-button>
    el-form-item>
  el-form>
template>

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

export default {
  setup() {
    const formData = reactive({
      username: '',
      password: '',
    });

    const formRules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
      ],
    };

    const formRef = ref(null);

    const onSubmit = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          // 处理表单提交逻辑
          console.log('提交表单：', formData);
        } else {
          console.log('表单校验失败');
        }
      });
    };

    return {
      formData,
      formRules,
      formRef,
      onSubmit,
    };
  },
};
script>

代码说明:

• 使用 el-form 组件创建表单，并通过 model 属性绑定表单数据。
• 使用 el-form-item 组件包裹每个表单项，并通过 prop 属性关联校验规则。
• 使用 el-input 组件创建输入框，并使用 v-model 实现双向数据绑定。
• 使用 el-button 组件创建提交按钮，并绑定 onSubmit 方法。
• 通过 formRef 获取表单实例，调用 validate 方法进行表单校验。