> 웹 프론트엔드 > View.js > Vue3 Element Plus el-form 폼 컴포넌트 사용 방법

Vue3 Element Plus el-form 폼 컴포넌트 사용 방법

王林
풀어 주다: 2023-05-12 20:04:04
앞으로
3278명이 탐색했습니다.

Element Plus에서 el-form은 사용자가 데이터를 작성하고 제출할 양식을 만드는 데 사용되는 양식 구성 요소입니다. 양식 유효성 검사를 더 쉽게 만들기 위해 다양한 내장 유효성 검사 규칙과 유효성 검사 방법을 제공합니다. 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 中添加了一些新的表单控件,如 TimePickerDatePickerTreeSelect 等。而在 ElementUI 中,这些表单控件是在 el-date-pickerel-time-pickerel-cascader 等组件中提供的。

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

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

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

常用属性

  • model:用于绑定表单数据对象,可以使用 v-model 绑定到表单元素。例如,<el-input v-model="formData.username"></el-input>

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

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

  • label-position:用于设置表单元素标签的位置,可选值有 &#39;right&#39;&#39;left&#39;&#39;top&#39;&#39;bottom&#39;

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

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

常用方法

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

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

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

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

    el-form 구성 요소를 사용하면 양식 컨트롤을 함께 구성하고 양식의 유효성을 검사하여 제출된 데이터가 예상 형식 및 요구 사항을 충족하는지 확인할 수 있습니다. 이 구성 요소에는 다음과 같은 기능이 있습니다. 🎜
    • 🎜내장 유효성 검사 규칙 및 사용자 정의 유효성 검사 기능을 지원합니다. 🎜
    • 🎜 model 속성을 ​​설정하여 양식 데이터를 양식 구성 요소에 바인딩할 수 있습니다. 🎜
    • 🎜양식 유효성 검사 전후에 콜백 기능을 지원합니다. 🎜
    • 🎜입력 상자, 드롭다운 상자, 라디오 버튼, 체크 상자 등과 같은 몇 가지 일반적인 양식 컨트롤을 제공합니다. 🎜
    🎜기능 및 사용법 측면에서 el-form 구성 요소는 Element Plus 및 ElementUI와 유사하지만 일부 세부 사항에서 약간의 변경 사항이 있습니다. 🎜🎜다음은 Element Plus 및 ElementUI의 el-form 구성 요소에 대한 몇 가지 주요 변경 사항입니다. 🎜
    • 🎜소개 방법: ElementUI는 < code> Vue.use(ElementUI)는 구성 요소를 도입하고 Element Plus는 import를 사용하여 구성 요소를 가져옵니다. 예를 들어 Vue 3에서 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>
    로그인 후 복사
    로그인 후 복사
    • 🎜스타일: Element Plus는 ElementUI의 기본 테마 및 스타일과 다른 새로운 기본 테마 및 스타일을 사용합니다. Element Plus에서 제공하는 테마 스타일을 사용하거나 테마 스타일을 사용자 정의할 수 있습니다. 🎜
    • 🎜양식 유효성 검사: Element Plus에서는 this.$refs.form.validate() 메서드를 통해 양식 유효성 검사가 수행됩니다. ElementUI에서는 this.$refs.form.validate((valid) => {}) 메서드를 통해 양식 유효성 검사가 수행됩니다. Element Plus에서는 양식 유효성 검사 콜백 함수가 선택적 매개 변수이기 때문입니다. 🎜
    • 🎜양식 컨트롤: TimePicker, DatePicker, TreeSelect</code와 같은 몇 가지 새로운 양식 컨트롤이 Element Plus에 추가되었습니다. > 기다려요. ElementUI에서 이러한 양식 컨트롤은 <code>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을 사용하여 양식에 바인딩할 수 있습니다. 강요. 예를 들어 <el-input v-model="formData.username"></el-input>입니다. 🎜
    • 🎜규칙: 양식 유효성 검사 규칙을 설정하는 데 사용됩니다. 규칙은 각 개체가 유효성 검사 규칙을 나타내는 배열입니다. 예를 들어 규칙: { 사용자 이름: [ { 필수: true, 메시지: '사용자 이름을 입력하세요', 트리거: 'blur' } ] }. 🎜
    • 🎜label-width: 양식 요소의 레이블 너비를 설정하는 데 사용됩니다. 🎜
    • 🎜label-position: 양식 요소 레이블의 위치를 ​​설정하는 데 사용됩니다. 선택 값에는 'right', 가 포함됩니다. '왼쪽' , '상단', '하단'. 🎜
    • 🎜inline: 인라인 형식인지 여부를 설정하는 데 사용됩니다. 🎜
    • 🎜disabled: 양식 비활성화 여부를 설정하는 데 사용됩니다. 🎜

    일반적인 방법

    • 🎜validate: 다음과 같은 경우 양식 유효성 검사를 실행하는 데 사용됩니다. 확인에 성공하면 콜백 함수를 실행하고 true를 전달하고, 그렇지 않으면 false를 전달합니다. 예를 들어 formRef.value.validate((valid) => { if (valid) { // 양식 유효성 검사 성공 } else { // 양식 유효성 검사 실패 } })입니다. 🎜
    • 🎜resetFields: 양식 데이터 및 유효성 검사 상태를 재설정하는 데 사용됩니다. 🎜
    • 🎜clearValidate: 양식 유효성 검사 상태를 지우는 데 사용됩니다. 🎜
    • 🎜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>
    로그인 후 복사
    로그인 후 복사

    위 내용은 Vue3 Element Plus el-form 폼 컴포넌트 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:yisu.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿