Comment utiliser le composant de formulaire el-form de Vue3 Element Plus

Dans Element Plus, el-form est un composant de formulaire utilisé pour créer des formulaires que les utilisateurs doivent remplir et soumettre des données. Il fournit de nombreuses règles et méthodes de validation intégrées pour faciliter la validation des formulaires. el-form 是一个表单组件，用于创建表单以便用户填写和提交数据。它提供了许多内置的验证规则和验证方法，使表单验证更加容易。

使用 el-form 组件，您可以将表单控件组织在一起，并对表单进行验证，以确保提交的数据符合预期的格式和要求。该组件具有以下特性：

• 支持内置的验证规则和自定义验证函数。

• 可以通过设置 model 属性将表单数据绑定到表单组件上。

• 支持表单验证前和验证后的回调函数。

• 提供了一些常见的表单控件，如输入框、下拉框、单选框、复选框等。

在功能和用法上，el-form 组件在 Element Plus 和 ElementUI 中是相似的，但是在一些细节上有一些变化。

以下是 Element Plus 和 ElementUI 中 el-form 组件的一些主要变化：

• 引入方式：ElementUI 使用 Vue.use(ElementUI) 的方式引入组件，而 Element Plus 使用 import 导入组件。例如，在 Vue 3 中使用 Element Plus，我们需要这样导入 el-form 组件：

import { ElForm } from 'element-plus'

• 样式：Element Plus 使用新的默认主题和样式，不同于 ElementUI 的默认主题和样式。您可以使用 Element Plus 提供的主题样式或自定义主题样式。

• 表单验证：在 Element Plus 中，表单验证通过 this.$refs.form.validate() 方法执行。而在 ElementUI 中，表单验证通过 this.$refs.form.validate((valid) => {}) 方法执行。这是因为在 Element Plus 中，表单验证的回调函数是一个可选参数。

• 表单控件：Element Plus 中添加了一些新的表单控件，如 TimePicker、DatePicker、TreeSelect 等。而在 ElementUI 中，这些表单控件是在 el-date-picker、el-time-picker、el-cascader 等组件中提供的。

• 翻译：Element Plus 支持更多的语言翻译，并且可以通过自定义翻译对象来支持更多的语言。而在 ElementUI 中，只有默认的语言翻译和几个语言包可用。

总之，Element Plus 是 ElementUI 的升级版，提供了更多的表单控件和功能，同时还改进了一些细节和样式。虽然两者之间有一些变化，但是如果您已经熟悉了 ElementUI 的 el-form 组件，那么您将会很快地适应 Element Plus 的使用。

el-form 是 Element Plus 中的表单组件，以下是 el-form 常用的属性和方法：

常用属性

• model：用于绑定表单数据对象，可以使用 v-model 绑定到表单元素。例如，b122fa15407dada9af39eddd0484f26f3950f2ccdbe6d532f43d14c598b37daa。

• rules：用于设置表单验证规则。规则是一个数组，其中每个对象表示一个验证规则。例如，rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ] }。

• label-width：用于设置表单元素的标签宽度。

• label-position：用于设置表单元素标签的位置，可选值有 'right'、'left'、'top'、'bottom'。

• inline：用于设置是否为行内表单。

• disabled：用于设置是否禁用表单。

常用方法

• validate：用于触发表单验证，如果验证成功，执行回调函数并传递 true，否则传递 false。例如，formRef.value.validate((valid) => { if (valid) { // 表单验证成功 } else { // 表单验证失败 } })。

• resetFields：用于重置表单数据和验证状态。

• clearValidate：用于清除表单验证状态。

• validateField：用于触发指定表单元素的验证。例如，formRef.value.validateField('username', (errorMessage) => { if (errorMessage) { // 验证失败 } else { // 验证成功 } })

  À l'aide du composant el-form, vous pouvez organiser les contrôles du formulaire ensemble et valider le formulaire pour vous assurer que les données soumises répondent au format et aux exigences attendus. Ce composant présente les fonctionnalités suivantes : 🎜
  • 🎜Prend en charge les règles de validation intégrées et les fonctions de validation personnalisées. 🎜
  • 🎜Vous pouvez lier les données du formulaire au composant de formulaire en définissant l'attribut model. 🎜
  • 🎜Prend en charge les fonctions de rappel avant et après la validation du formulaire. 🎜
  • 🎜Fournit certains contrôles de formulaire courants, tels que des zones de saisie, des listes déroulantes, des boutons radio, des cases à cocher, etc. 🎜
  🎜En termes de fonctionnalité et d'utilisation, le composant el-form est similaire dans Element Plus et ElementUI, mais il y a quelques changements dans certains détails. 🎜🎜Voici quelques modifications majeures apportées au composant el-form dans Element Plus et ElementUI : 🎜
  • 🎜Méthode d'introduction : ElementUI utilise Vue.use(ElementUI) introduit des composants, tandis qu'Element Plus utilise import pour importer des composants. Par exemple, lorsque nous utilisons Element Plus dans Vue 3, nous devons importer le composant el-form comme ceci : 🎜

  <template>
    <el-form ref="form" :model="formData" :rules="rules">
      <el-form-item label="Username" prop="username">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">Submit</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script>
  import { ref } from &#39;vue&#39;
  import { ElForm, ElFormItem, ElInput, ElButton } from &#39;element-plus&#39;
  
  export default {
    components: {
      ElForm,
      ElFormItem,
      ElInput,
      ElButton,
    },
    setup() {
      const formData = ref({
        username: &#39;&#39;,
      })
  
      const rules = ref({
        username: [
          { required: true, message: &#39;Username is required&#39;, trigger: &#39;blur&#39; },
          { min: 3, max: 16, message: &#39;Length should be between 3 and 16&#39;, trigger: &#39;blur&#39; }
        ]
      })
  
      const submitForm = () => {
        formRef.value.validate(valid => {
          if (valid) {
            // Submit form data
          } else {
            console.log(&#39;Validation failed&#39;)
            return false
          }
        })
      }
  
      const formRef = ref(null)
  
      return {
        formData,
        rules,
        submitForm,
        formRef,
      }
    }
  }
  </script>

  • 🎜Style : Element Plus utilise un nouveau thème et un nouveau style par défaut, différents du thème et du style par défaut d'ElementUI. Vous pouvez utiliser les styles de thème fournis par Element Plus ou personnaliser le style de thème. 🎜
  • 🎜Validation du formulaire : dans Element Plus, la validation du formulaire est effectuée via la méthode this.$refs.form.validate(). Dans ElementUI, la validation du formulaire est effectuée via la méthode this.$refs.form.validate((valid) => {}). En effet, dans Element Plus, la fonction de rappel de validation de formulaire est un paramètre facultatif. 🎜
  • 🎜Contrôles de formulaire : de nouveaux contrôles de formulaire ont été ajoutés à Element Plus, tels que TimePicker, DatePicker, TreeSelect attends. Dans ElementUI, ces contrôles de formulaire sont fournis dans des composants tels que el-date-picker, el-time-picker, el-cascader de. 🎜
  • 🎜Traduction : Element Plus prend en charge davantage de traductions de langues et peut prendre en charge davantage de langues en personnalisant les objets de traduction. Dans ElementUI, seule la traduction de langue par défaut et plusieurs packs de langues sont disponibles. 🎜
  🎜En bref, Element Plus est une version améliorée d'ElementUI, fournissant plus de contrôles et de fonctions de formulaire, tout en améliorant également certains détails et styles. Bien qu'il y ait quelques changements entre les deux, si vous êtes déjà familier avec le composant el-form d'ElementUI, vous vous adapterez rapidement à l'utilisation d'Element Plus. 🎜🎜el-form est un composant de formulaire dans Element Plus. Voici les attributs et méthodes couramment utilisés de el-form : 🎜

  Attributs communs

  • 🎜model : utilisé pour lier des objets de données de formulaire, vous pouvez utiliser v-model pour lier au formulaire éléments. Par exemple, 9a32171e43b239262404303a4d3823903950f2ccdbe6d532f43d14c598b37daa. 🎜
  • 🎜rules : utilisé pour définir les règles de validation du formulaire. Rules est un tableau où chaque objet représente une règle de validation. Par exemple, rules : { nom d'utilisateur : [ { obligatoire : true, message : 'Veuillez saisir votre nom d'utilisateur', déclencheur : 'flou' } ] }. 🎜
  • 🎜label-width : utilisé pour définir la largeur de l'étiquette des éléments du formulaire. 🎜
  • 🎜label-position : utilisé pour définir la position de l'étiquette de l'élément de formulaire. Les valeurs facultatives incluent 'right', . 'gauche' , 'haut', 'bas'. 🎜
  • 🎜inline : utilisé pour définir s'il s'agit d'un formulaire en ligne. 🎜
  • 🎜disabled : utilisé pour définir s'il faut désactiver le formulaire. 🎜

  Méthodes courantes

  • 🎜validate : utilisée pour déclencher la validation du formulaire, si Si la vérification réussit, exécutez la fonction de rappel et transmettez true, sinon transmettez false. Par exemple, formRef.value.validate((valid) => { if (valid) { // La validation du formulaire a réussi } else { // La validation du formulaire a échoué } }). 🎜
  • 🎜resetFields : utilisé pour réinitialiser les données du formulaire et le statut de validation. 🎜
  • 🎜clearValidate : utilisé pour effacer le statut de validation du formulaire. 🎜
  • 🎜validateField : utilisé pour déclencher la validation des éléments de formulaire spécifiés. Par exemple, formRef.value.validateField('username', (errorMessage) => { if (errorMessage) { // Échec de la validation } else { // Validation réussie } }). 🎜

  • submit：用于提交表单数据，需要指定一个回调函数，该函数在提交成功或失败时被调用。例如，formRef.value.submit((formData) => { // 表单提交成功 }, (error) => { // 表单提交失败 })。

  这些是 el-form 常用的属性和方法，当然，还有其他属性和方法可以在需要时使用。在 Element Plus 的官方文档中，您可以找到更详细的文档和示例。

  下面是一个简单的 el-form 示例，包括一个输入框和一个提交按钮：

  <template>
    <el-form ref="form" :model="formData" :rules="rules">
      <el-form-item label="Username" prop="username">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">Submit</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script>
  import { ref } from &#39;vue&#39;
  import { ElForm, ElFormItem, ElInput, ElButton } from &#39;element-plus&#39;
  
  export default {
    components: {
      ElForm,
      ElFormItem,
      ElInput,
      ElButton,
    },
    setup() {
      const formData = ref({
        username: &#39;&#39;,
      })
  
      const rules = ref({
        username: [
          { required: true, message: &#39;Username is required&#39;, trigger: &#39;blur&#39; },
          { min: 3, max: 16, message: &#39;Length should be between 3 and 16&#39;, trigger: &#39;blur&#39; }
        ]
      })
  
      const submitForm = () => {
        formRef.value.validate(valid => {
          if (valid) {
            // Submit form data
          } else {
            console.log(&#39;Validation failed&#39;)
            return false
          }
        })
      }
  
      const formRef = ref(null)
  
      return {
        formData,
        rules,
        submitForm,
        formRef,
      }
    }
  }
  </script>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!