Cara menggunakan komponen borang el-form Vue3 Element Plus

Dalam Element Plus, el-form ialah komponen borang yang digunakan untuk membuat borang untuk pengguna mengisi dan menyerahkan data. Ia menyediakan banyak peraturan pengesahan terbina dalam dan kaedah pengesahan untuk memudahkan pengesahan borang.

Menggunakan komponen el-form, anda boleh menyusun kawalan borang bersama-sama dan mengesahkan borang untuk memastikan data yang diserahkan memenuhi format dan keperluan yang diharapkan. Komponen ini mempunyai ciri berikut:

• Menyokong peraturan pengesahan terbina dalam dan fungsi pengesahan tersuai.

• Anda boleh mengikat data borang pada komponen borang dengan menetapkan atribut model.

• Menyokong fungsi panggil balik sebelum dan selepas pengesahan borang.

• menyediakan beberapa kawalan bentuk biasa, seperti kotak input, kotak lungsur, butang radio, kotak semak, dsb.

Dari segi kefungsian dan penggunaan, komponen el-form adalah serupa dalam Element Plus dan ElementUI, tetapi terdapat beberapa perubahan dalam beberapa butiran.

Berikut ialah beberapa perubahan besar dalam el-form komponen dalam Element Plus dan ElementUI:

• Kaedah pengenalan: ElementUI menggunakan kaedah Vue.use(ElementUI) untuk memperkenalkan komponen, manakala Element Plus Gunakan import untuk mengimport komponen. Contohnya, menggunakan Element Plus dalam Vue 3, kita perlu mengimport komponen el-form seperti ini:

import { ElForm } from 'element-plus'

• Gaya: Element Plus menggunakan tema lalai baharu dan gaya, Berbeza daripada tema dan gaya lalai ElementUI. Anda boleh menggunakan gaya tema yang disediakan oleh Element Plus atau menyesuaikan gaya tema.

• Pengesahan borang: Dalam Element Plus, pengesahan borang dilakukan melalui kaedah this.$refs.form.validate(). Dalam ElementUI, pengesahan borang dilakukan melalui kaedah this.$refs.form.validate((valid) => {}). Ini kerana dalam Element Plus, fungsi panggil balik pengesahan borang ialah parameter pilihan.

• Kawalan borang: Beberapa kawalan borang baharu telah ditambahkan pada Element Plus, seperti TimePicker, DatePicker, TreeSelect, dsb. Dalam ElementUI, kawalan borang ini disediakan dalam komponen seperti el-date-picker, el-time-picker dan el-cascader.

• Terjemahan: Element Plus menyokong lebih banyak terjemahan bahasa dan boleh menyokong lebih banyak bahasa dengan menyesuaikan objek terjemahan. Dalam ElementUI, hanya terjemahan bahasa lalai dan beberapa pek bahasa tersedia.

Ringkasnya, Element Plus ialah versi ElementUI yang dinaik taraf, menyediakan lebih banyak kawalan dan fungsi bentuk, di samping menambah baik beberapa butiran dan gaya. Walaupun terdapat beberapa perubahan antara kedua-duanya, jika anda sudah biasa dengan komponen el-form ElementUI, anda akan cepat menyesuaikan diri menggunakan Element Plus.

el-form ialah komponen bentuk dalam Element Plus Berikut ialah atribut dan kaedah yang biasa digunakan el-form:

Atribut biasa

• <🎜. >

  : Digunakan untuk mengikat objek data bentuk, anda boleh menggunakan model untuk mengikat kepada membentuk elemen. Contohnya, v-model. <el-input v-model="formData.username"></el-input>

• : digunakan untuk menetapkan peraturan pengesahan borang. Peraturan ialah tatasusunan di mana setiap objek mewakili peraturan pengesahan. Contohnya, rules. rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ] }

• : digunakan untuk menetapkan lebar label elemen bentuk. label-width

• : digunakan untuk menetapkan kedudukan label elemen bentuk adalah label-position, 'right', 'left', 'top'. 'bottom'

• : digunakan untuk menetapkan sama ada ia adalah borang sebaris. inline

• : digunakan untuk menetapkan sama ada untuk melumpuhkan borang. disabled

• : digunakan untuk mencetuskan pengesahan borang Jika pengesahan berjaya, laksanakan fungsi panggil balik dan lulus validate, jika tidak Lulus true. Contohnya, false. formRef.value.validate((valid) => { if (valid) { // 表单验证成功 } else { // 表单验证失败 } })

• : Digunakan untuk menetapkan semula data borang dan status pengesahan. resetFields

• : Digunakan untuk mengosongkan status pengesahan borang. clearValidate

• : digunakan untuk mencetuskan pengesahan elemen borang yang ditentukan. Contohnya, validateField. formRef.value.validateField('username', (errorMessage) => { if (errorMessage) { // 验证失败 } else { // 验证成功 } })

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

Atas ialah kandungan terperinci Cara menggunakan komponen borang el-form Vue3 Element Plus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!