elemenPlus表单From相关大全

喝旺仔la

于 2024-09-15 15:00:00 发布

阅读量405

点赞数 18

文章标签：前端

本文链接：https://blog.csdn.net/m0_75068951/article/details/142262634

版权

表单包含 输入框, 单选框, 下拉选择, 多选框 等用户输入的组件。使用表单，您可以收集、验证和提交数据。

Form 组件已经从 2. x 的 Float 布局升级为 Flex 布局。

典型表单

最基础的表单包括各种输入表单项，比如input、select、radio、checkbox等。

在每一个 form 组件中，你需要一个 form-item 字段作为输入项的容器，用于获取值与验证值。

输入框（<el-input>）：支持单行文本输入、多行文本输入（通过type="textarea"）、密码输入（通过type="password"）等。
选择器（<el-select>）：用于从一组预定义的数据中选择一个或多个值。
日期选择器（<el-date-picker>、<el-time-picker>、<el-date-time-picker>）：用于选择日期、时间或日期时间。
开关（<el-switch>）：用于表示开/关状态。
单选框（<el-radio>）、多选框（<el-checkbox>）：用于表示互斥或可多选的状态。

表单的基本使用

ElementPlus的表单组件（<el-form>）用于收集、校验和提交用户输入的数据。它内部可以包含各种表单控件，如输入框（<el-input>）、选择器（<el-select>）、单选框（<el-radio>）、多选框（<el-checkbox>）等。

数据绑定：通过v-model指令将表单控件的值与Vue实例中的数据属性进行双向绑定。
表单提交：可以使用<el-button>组件的@click事件来触发表单提交的逻辑，或者使用<el-form>组件的@submit事件（需要阻止默认行为）。

行内表单

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。

通过设置 inline 属性为 true 可以让表单域变为行内的表单域。

对齐方式

可以分别设置 el-form-item 的label-position 2.7.7. 如果值为空, 则会使用 el-form的label-position。

The label-position attribute decides how labels align, it can be top or left. When set to top, labels will be placed at the top of the form field. 当设为 top 时标签会置于表单域的顶部

<template>
  <el-form
    :label-position="labelPosition"
    label-width="auto"
    :model="formLabelAlign"
    style="max-width: 600px"
  >
    <el-form-item label="Form Align" label-position="right">
      <el-radio-group v-model="labelPosition" aria-label="label position">
        <el-radio-button value="left">Left</el-radio-button>
        <el-radio-button value="right">Right</el-radio-button>
        <el-radio-button value="top">Top</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Form Item Align" label-position="right">
      <el-radio-group
        v-model="itemLabelPosition"
        aria-label="item label position"
      >
        <el-radio-button value="">Empty</el-radio-button>
        <el-radio-button value="left">Left</el-radio-button>
        <el-radio-button value="right">Right</el-radio-button>
        <el-radio-button value="top">Top</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Name" :label-position="itemLabelPosition">
      <el-input v-model="formLabelAlign.name" />
    </el-form-item>
    <el-form-item label="Activity zone" :label-position="itemLabelPosition">
      <el-input v-model="formLabelAlign.region" />
    </el-form-item>
    <el-form-item label="Activity form" :label-position="itemLabelPosition">
      <el-input v-model="formLabelAlign.type" />
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormItemProps, FormProps } from 'element-plus'

const labelPosition = ref<FormProps['labelPosition']>('right')
const itemLabelPosition = ref<FormItemProps['labelPosition']>('')
const formLabelAlign = reactive({
  name: '',
  region: '',
  type: '',
})
</script>

表单校验

Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。

Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。校验规则参见 async-validator

自定义校验规则

自定义的校验回调函数必须被调用。

添加/删除表单项

除了一次通过表单组件上的所有验证规则外. 也可以动态地通过验证规则或删除单个表单字段的规则。

数字类型验证

数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。

尺寸控制

表单中的所有子组件都继承了该表单的 size 属性。同样，form-item 也有一个 size 属性。

如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的 size 属性，直接为这个表单项或表单组件设置自己的 size 属性即可。