So verwenden Sie die Formularkomponente Vue3 Element Plus el-form

In Element Plus ist el-form eine Formularkomponente, die zum Erstellen von Formularen verwendet wird, in denen Benutzer Daten ausfüllen und übermitteln können. Es bietet viele integrierte Validierungsregeln und Validierungsmethoden, um die Formularvalidierung zu vereinfachen. 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 { // 验证成功 } })

  Mit der el-form-Komponente können Sie Formularsteuerelemente gemeinsam organisieren und das Formular validieren, um sicherzustellen, dass die übermittelten Daten dem erwarteten Format und den erwarteten Anforderungen entsprechen. Diese Komponente verfügt über die folgenden Funktionen: 🎜
  • 🎜Unterstützt integrierte Validierungsregeln und benutzerdefinierte Validierungsfunktionen. 🎜
  • 🎜Sie können Formulardaten an die Formularkomponente binden, indem Sie das Attribut model festlegen. 🎜
  • 🎜Unterstützt Rückruffunktionen vor und nach der Formularvalidierung. 🎜
  • 🎜Bietet einige gängige Formularsteuerelemente, wie Eingabefelder, Dropdown-Felder, Optionsfelder, Kontrollkästchen usw. 🎜
  🎜In Bezug auf Funktionalität und Verwendung ist die el-form-Komponente in Element Plus und ElementUI ähnlich, es gibt jedoch einige Änderungen in einigen Details. 🎜🎜Im Folgenden sind einige wichtige Änderungen an der el-form-Komponente in Element Plus und ElementUI aufgeführt: 🎜
  • 🎜Einführungsmethode: ElementUI verwendet Vue.use(ElementUI) führt Komponenten ein, während Element Plus import zum Importieren von Komponenten verwendet. Wenn wir beispielsweise Element Plus in Vue 3 verwenden, müssen wir die el-form-Komponente wie folgt importieren: 🎜

  <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>

  • 🎜Stil: Element Plus verwendet ein neues Standardthema und -stil, das sich vom Standardthema und -stil von ElementUI unterscheidet. Sie können die von Element Plus bereitgestellten Designstile verwenden oder den Designstil anpassen. 🎜
  • 🎜Formularvalidierung: In Element Plus wird die Formularvalidierung über die Methode this.$refs.form.validate() durchgeführt. In ElementUI wird die Formularvalidierung über die Methode this.$refs.form.validate((valid) => {}) durchgeführt. Dies liegt daran, dass in Element Plus die Rückruffunktion zur Formularvalidierung ein optionaler Parameter ist. 🎜
  • 🎜Formularsteuerelemente: Einige neue Formularsteuerelemente wurden zu Element Plus hinzugefügt, z. B. TimePicker, DatePicker, TreeSelect warte. In ElementUI werden diese Formularsteuerelemente in Komponenten wie el-date-picker, el-time-picker, el-cascader bereitgestellt. 🎜
  • 🎜Übersetzung: Element Plus unterstützt mehr Sprachübersetzungen und kann durch die Anpassung von Übersetzungsobjekten mehr Sprachen unterstützen. In ElementUI sind nur die Standardsprachübersetzung und mehrere Sprachpakete verfügbar. 🎜
  🎜Kurz gesagt ist Element Plus eine aktualisierte Version von ElementUI, die mehr Formularsteuerelemente und -funktionen bietet und gleichzeitig einige Details und Stile verbessert. Obwohl es einige Änderungen zwischen den beiden gibt, werden Sie sich schnell an die Verwendung von Element Plus gewöhnen, wenn Sie bereits mit der el-form-Komponente von ElementUI vertraut sind. 🎜🎜el-form ist eine Formularkomponente in Element Plus. Im Folgenden sind die häufig verwendeten Attribute und Methoden von el-form aufgeführt: 🎜

  Gemeinsame Attribute

  • 🎜model: Wird zum Binden von Formulardatenobjekten verwendet. Sie können v-model zum Binden an das Formular verwenden Elemente. Beispiel: 9a32171e43b239262404303a4d3823903950f2ccdbe6d532f43d14c598b37daa. 🎜
  • 🎜rules: wird zum Festlegen von Formularvalidierungsregeln verwendet. Rules ist ein Array, in dem jedes Objekt eine Validierungsregel darstellt. Beispiel: rules: { Benutzername: [ { erforderlich: wahr, Nachricht: „Bitte geben Sie Ihren Benutzernamen ein“, Auslöser: „unschärfe“ } ] . 🎜
  • 🎜label-width: wird verwendet, um die Beschriftungsbreite von Formularelementen festzulegen. 🎜
  • 🎜label-position: wird verwendet, um die Position der Formularelementbeschriftung festzulegen. Zu den optionalen Werten gehören 'right', 'links' , 'oben', 'unten'. 🎜
  • 🎜inline: wird verwendet, um festzulegen, ob es sich um ein Inline-Formular handelt. 🎜
  • 🎜disabled: wird verwendet, um festzulegen, ob das Formular deaktiviert werden soll. 🎜

  Gemeinsame Methoden

  • 🎜validate: Wird verwendet, um die Formularvalidierung auszulösen, wenn Wenn die Überprüfung erfolgreich ist, führen Sie die Rückruffunktion aus und übergeben Sie true, andernfalls übergeben Sie false. Beispiel: formRef.value.validate((valid) => { if (valid) { // Formularvalidierung erfolgreich } else { // Formularvalidierung fehlgeschlagen } }). 🎜
  • 🎜resetFields: wird zum Zurücksetzen von Formulardaten und Validierungsstatus verwendet. 🎜
  • 🎜clearValidate: Wird zum Löschen des Formularvalidierungsstatus verwendet. 🎜
  • 🎜validateField: wird verwendet, um die Validierung angegebener Formularelemente auszulösen. Beispiel: formRef.value.validateField('username', (errorMessage) => { if (errorMessage) { // Validierung fehlgeschlagen } else { // Validierung erfolgreich } }). 🎜

  • 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>

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Formularkomponente Vue3 Element Plus el-form. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!