当前位置: 首页 > article >正文

3-22 ElementPlus:表单

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

代码结构:

    <el-form :model="form" ref="form" :rules="formRules" label-width="120px">
      <!-- prop 必填项-->
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="form.age" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="form.sex" placeholder="请选择性别">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
表单项常用组件:
el-input:输入框
el-select:下拉选择框
el-checkbox-group:多选框
el-radio-group:单选框

http://www.kler.cn/a/406379.html

相关文章:

  • //动态内存分配
  • [第五空间 2021]pklovecloud 详细题解
  • 人工智能(AI)与机器学习(ML)基础知识
  • Linux 进程概念与进程状态
  • 《智能指针频繁创建销毁:程序性能的“隐形杀手”》
  • uniapp开发微信小程序笔记3-全局配置、导航栏配置、tabBar配置
  • vue3 在哪些方便做了性能提升?
  • 【不墨迹系列】快速入门 XML 语言
  • SpringCloud OpenFeign用户转发在请求头中添加用户信息 微服务内部调用
  • STL-stack栈:P1981 [NOIP2013 普及组] 表达式求值
  • Cannal实现MySQL主从同步环境搭建
  • 量子神经网络
  • Java 创建不可变集合
  • 浅谈丨功能安全测试,汽车的守护者
  • 40分钟学 Go 语言高并发:sync包详解(下)
  • 如何用通义灵码助力项目开发 | OceanBase obdiag 项目共建实践
  • 【大数据学习 | Spark-Core】Spark的分区器(HashPartitioner和RangePartitioner)
  • 大数据新视界 -- 大数据大厂之 Hive 数据导入:多源数据集成的策略与实战(上)(3/ 30)
  • xiaolin coding 图解网络笔记——HTTP篇
  • Antd中的布局组件
  • RecyclerView详解——(四)缓存复用机制
  • 论文阅读——Intrusion detection systems using longshort‑term memory (LSTM)
  • 儿童玩具安全检测GB6675标准详细介绍
  • PHP 8.4 重磅发布了
  • 如何创建你的第一个 Telegram 机器人:一步步教程
  • 【Python TensorFlow】进阶指南(续篇三)