首页 前端知识 Vue ElementPlus Form、Form-item 表单

Vue ElementPlus Form、Form-item 表单

2024-05-27 09:05:54 前端知识 前端哥 459 365 我要收藏

Form 表单


由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据,组件升级采用了 flex 布局,以替代旧版本的 float 布局。

在 Element Plus 中,el-form 是一个表单组件,用于创建表单以便用户填写和提交数据。它提供了许多内置的验证规则和验证方法,使表单验证更加容易。

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

  • 支持内置的验证规则和自定义验证函数。
  • 可以通过设置 model 属性将表单数据绑定到表单组件上。
  • 支持表单验证前和验证后的回调函数。
  • 提供了一些常见的表单控件,如输入框、下拉框、单选框、复选框等。

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

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

  1. 引入方式:ElementUI 使用 Vue.use(ElementUI) 的方式引入组件,而 Element Plus 使用 import 导入组件。例如,在 Vue 3 中使用 Element Plus,我们需要这样导入 el-form 组件:import { ElForm } from 'element-plus'
  2. 样式:Element Plus 使用新的默认主题和样式,不同于 ElementUI 的默认主题和样式。您可以使用 Element Plus 提供的主题样式或自定义主题样式。

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

  4. 表单控件:Element Plus 中添加了一些新的表单控件,如 TimePickerDatePickerTreeSelect 等。而在 ElementUI 中,这些表单控件是在 el-date-pickerel-time-pickerel-cascader 等组件中提供的。

  5. 翻译: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: '请输入用户名', 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 { // 验证成功 } })
  • submit:用于提交表单数据,需要指定一个回调函数,该函数在提交成功或失败时被调用。例如,formRef.value.submit((formData) => { // 表单提交成功 }, (error) => { // 表单提交失败 })

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

 下面是一个简单的 el-form 示例:

<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="100px">

    <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 type="password" v-model="form.password"></el-input>
    </el-form-item>

    <el-form-item>
       <el-button type="primary" @click="submitForm('form')">提交</el-button>
    </el-form-item>

  </el-form>
</template>
 
<script>
  export default {
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('提交成功!');
          } else {
            console.log('验证失败');
            return false;
          }
        });
      }
    }
  }
</script>

在这个例子中,el-form:model属性绑定了表单数据form:rules属性绑定了表单验证规则rules。每个需要验证的el-form-item组件都有一个prop属性,它对应rules中的一个验证规则。

当用户点击提交按钮时,submitForm方法会被触发,该方法使用this.$refs[formName].validate来触发表单的验证。如果验证通过,则可以执行提交操作;如果验证失败,则不会执行提交操作,并在控制台输出验证失败信息。

 

 

典型表单


包括各种表单项,比如输入框、选择器、开关、单选框、多选框等。

在 Form 组件中,每一个表单域由一个 Form-Item 组件构成,表单域中可以放置各种类型的表单控件,包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker 

<template>
  <el-form ref="form" :model="form" label-width="80px">

  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>

  <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
 
 <el-form-item label="活动时间">
    <el-col :span="11">
      <el-date-picker
        type="date"
        placeholder="选择日期"
        v-model="form.date1"
        style="width: 100%;"
      ></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker
        placeholder="选择时间"
        v-model="form.date2"xx`
        style="width: 100%;"
      ></el-time-picker>
    </el-col>
  </el-form-item>

  <el-form-item label="即时配送">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>

  <el-form-item label="活动性质">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>

  <el-form-item label="特殊资源">
    <el-radio-group v-model="form.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="活动形式">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>

</el-form>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        },
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!')
      },
    },
  }
</script>

表单验证


在防止用户犯错的前提下,尽可能让用户更早地发现并纠正错误。trigger:触发方式,改变再触发 change,得到焦点再失去焦点触发 blur。

Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。 

<template>
  <el-form
  :model="ruleForm"
  :rules="rules"
  ref="ruleForm"
  label-width="100px"
  class="demo-ruleForm"
>
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="ruleForm.date1"
          style="width: 100%;"
        ></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker
          placeholder="选择时间"
          v-model="ruleForm.date2"
          style="width: 100%;"
        ></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="即时配送" prop="delivery">
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活动形式" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')"
      >立即创建</el-button
    >
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur',
            },
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' },
          ],
          date1: [
            {
              type: 'date',
              required: true,
              message: '请选择日期',
              trigger: 'change',
            },
          ],
          date2: [
            {
              type: 'date',
              required: true,
              message: '请选择时间',
              trigger: 'change',
            },
          ],
          type: [
            {
              type: 'array',
              required: true,
              message: '请至少选择一个活动性质',
              trigger: 'change',
            },
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' },
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' },
          ],
        },
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
    },
  }
</script>

表单数据的定义:

        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
        },

表单数据校验规则的定义:

 rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur',
            },
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' },
          ],
          date1: [
            {
              type: 'date',
              required: true,
              message: '请选择日期',
              trigger: 'change',
            },
          ],
          date2: [
            {
              type: 'date',
              required: true,
              message: '请选择时间',
              trigger: 'change',
            },
          ],
          type: [
            {
              type: 'array',
              required: true,
              message: '请至少选择一个活动性质',
              trigger: 'change',
            },
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' },
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' },
          ],
        },
      }
    },
转载请注明出处或者链接地址:https://www.qianduange.cn//article/9644.html
标签
评论
发布的文章

npm install 报错解决记录

2024-09-09 00:09:08

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!