element plus表单

Element Plus 是一个基于 Vue.js 2.0 的桌面端组件库，它包含了丰富的 UI 组件和功能，其中包括表单组件。

在 Element Plus 中，表单组件主要由 Form、FormItem、Input、Select、Radio、Checkbox、Switch、DatePicker、TimePicker、Upload 等组件组成。

以下是一个简单的示例，展示了如何使用 Element Plus 的表单组件：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过，执行提交操作
        } else {
          // 表单验证失败，提示错误信息
        }
      });
    }
  }
};
</script>

在上面的示例中，我们使用了 Form、FormItem、Input 和 Button 组件来创建一个简单的登录表单。我们将表单数据绑定到了 data 中的 form 对象中，并在 submitForm 方法中执行表单验证操作。如果表单验证通过，我们可以在方法中执行相应的提交操作；如果表单验证失败，我们可以在 else 语句中提示错误信息。

注意，示例中使用了 $refs 来引用表单组件，并调用 validate 方法进行表单验证。这是 Element Plus 表单组件的一个常用操作，我们可以通过调用 validate 方法来触发表单验证，并通过回调函数获取验证结果。