Element UI//表单用法（表单校验）

最新推荐文章于 2024-07-05 16:20:32 发布

爱吃松果的美美

最新推荐文章于 2024-07-05 16:20:32 发布

阅读量1.4k

点赞数

分类专栏：插件、样式库文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_37877794/article/details/114114141

版权

本文详细介绍了Element UI中的表单用法，包括基本的表单组件绑定、表单校验规则设定，以及如何进行表单校验状态的控制。重点讲述了表单校验的高级用法，如动态改变校验规则和手动控制验证状态，并解析了表单的相关属性，如hide-required-asterisk、inline-message等。

摘要由CSDN通过智能技术生成

表单基本用法

el-form 容器，通过 model 绑定数据
el-form-item 容器，通过 label 绑定标签
表单组件通过 v-model 绑定 model 中的数据

<template>
  <div id="app">
    <el-form inline :model="data">
      <el-form-item label="审批人">
        <el-input v-model="data.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="data.region" placeholder="活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type