Javaweb之Vue组件库Element之Form表单的详细解析

最新推荐文章于 2024-05-09 23:33:38 发布
最新推荐文章于 2024-05-09 23:33:38 发布
阅读量854 收藏 3
点赞数 5
分类专栏： Web 文章标签： vue.js elementui javascript 开发语言 前端 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69748833/article/details/134678423
版权

4.3.4 Form表单

4.3.4.1 组件演示

Form 表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。

表单在我们前端的开发中使用的还是比较多的，接下来我们学习这个组件，与之前的流程一样，我们首先需要在ElementUI的官方找到对应的组件示例：如下图所示：

我们的需求效果是：在对话框中呈现表单内容，类似如下图所示：

所以，首先我们先要根据上一小结所学习的内容，制作一个新的对话框，其代码如下：

<br><br>
<!-- Dialog对话框-Form表单 -->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的 Dialog</el-button>
​
<el-dialog title="Form表单" :visible.sync="dialogFormVisible">
​
</el-dialog>

还需要注意的是，针对这个新的对话框，我们需要在data中声明新的变量dialogFormVisible来控制对话框的隐藏与显示，代码如下：

 dialogFormVisible: false,

打开浏览器，此时呈现如图所示的效果：

然后我们复制官网提供的template部分代码到我们的vue组件文件的Dialog组件中，但是，此处官方提供的表单项标签太多，所以我们只需要保留前面3个表单项组件，其他多余的删除，所以最终template部分代码如下：

<el-dialog title="Form表单" :visible.sync="dialogFormVisible">
            
            <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" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
            
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

观察上述代码，我们发现其中表单项标签使用了v-model双向绑定，所以我们需要在vue的数据模型中声明变量，同样可以从官方提供的代码中复制粘贴，但是我们需要去掉我们不需要的属性，通过观察上述代码，我们发现双向绑定的属性有4个，分别是form.name,form.region,form.date1,form.date2,所以最终数据模型如下：

form: {
          name: '',
          region: '',
          date1: '',
          date2:''
        },

同样，官方的代码中，在script部分中，还提供了onSubmit函数，表单的立即创建按钮绑定了此函数，我们可以输入表单的内容，而表单的内容是双向绑定到form对象的，所以我们修改官方的onSubmit函数如下即可，而且我们还需要关闭对话框，最终函数代码如下：

 onSubmit() {
       console.log(this.form); //输出表单内容到控制台
        this.dialogFormVisible=false; //关闭表案例的对话框
      }

然后打开浏览器，我们打开对话框，并且输入表单内容，点击立即创建按钮，呈现如下效果；

最终vue组件完整代码如下，同学们可以针对form表单案例，参考该案例对应的template部分和script部分代码

<template>
    <div>
    <!-- Button按钮 -->
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>
​
        <!-- Table表格 -->
        <el-table
        :data="tableData"
        style="width: 100%">
            <el-table-column
                prop="date"
                label="日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址">
            </el-table-column>
        </el-table>
​
        <br>
        <!-- Pagination分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            layout="sizes,prev, pager, next,jumper,total"
            :total="1000">
        </el-pagination>
​
        <br><br>
        <!--Dialog 对话框 -->
        <!-- Table -->
        <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
​
        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
            <el-table-column property="date" label="日期" width="150"></el-table-column>
            <el-table-column property="name" label="姓名" width="200"></el-table-column>
            <el-table-column property="address" label="地址"></el-table-column>
        </el-table>
        </el-dialog>
​
        <br><br>
        <!-- Dialog对话框-Form表单 -->
        <el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的 Dialog</el-button>
​
        <el-dialog title="Form表单" :visible.sync="dialogFormVisible">
            
            <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" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
            
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
​
<script>
export default {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      //表单案例的提交事件
      onSubmit() {
        console.log(this.form); //输出表单内容到控制台
        this.dialogFormVisible=false; //关闭表案例的对话框
      }
    },
     data() {
        return {
        //表单案例的数据双向绑定
        form: {
          name: '',
          region: '',
          date1: '',
          date2:''
        },
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
        dialogFormVisible: false, //控制form表单案例的对话框
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
}
</script>
​
<style>
​
</style>
​

向着五星的方向
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue业务组件封装（二）Form表单
郊眠寺
06-27 9551
封装组件的基本方法就是通过props和emit进行父子组件的传值和通信。利用插槽、组件等增加组件的可扩展性和复用性。Form表单包含 输入框, 单选框, 下拉选择, 多选框 等用户输入的组件。使用表单，可以收集、验证和提交数据。表单常用的地方是在搜索、信息提交、内容编辑以及新增。搜索表单编辑表单这里以最基本的Form代码为例进行分析： 基本表单根据基本的Form代码，我们可以知道：通过分析Form代码我们可以通过一个配置文件去遍历得到el-form-item，然后在el-form-item上面绑定我们需要的
JavaWeb-Vue
10-08
3. **02-Vue&Element-黑马资料**：Element UI是一个基于Vue.js的组件库，用于快速构建企业级后台界面。这部分资料可能涵盖了如何使用Element UI的各种组件，如表格、按钮、弹框、导航等，并结合Vue进行实际项目开发...
【element-ui】el-from的表单验证方式以及属性的使用总结
工作的日常记录和平凡的生活分享
04-12 3718
在后台管理系统的开发中，一般都是操作数据，因此表单的使用频率很高，然而表单的输入基本都需要输入验证来确保提交的数据格式符合需求，因此前端的验证很重要，就会避免一些不必要的错误提交到后台去
Vue3专栏项目 -- 二、自定义Form组件（上）
最新发布
m0_64931189的博客
05-09 1079
说到表单我们就不得不提到验证，我们需要过滤掉一系列方法的输入，最早的时候这个功能一般是在服务器端完成，假如有错误服务器会返回并且渲染一些错误，这样做费时费力，所以说在现在的web应用中，表单一般会在前端进行验证，它会适时的展示用户的问题，当没问题时就发送请求，然后后端再验证一次，我们现在还没有接入后端，所以不需要考虑点击提交以后和后端的交互功能，而是只有一个关注点，那就是表单验证。所谓表单验证是表单世界里前端最重要的一个功能，将表单验证的功能封装好也算是一个难点，接下来我们来一步步完成这个任务。
VUE--Form表单
热门推荐
weixin_43989275的博客
04-18 4万+
表单内容 1、写在data内验证： ：代表这是一个表单 -> ref：表单被引用时的名称，标识 是我们绑定的对象 -> rules：是动态绑定的rules，表单验证规则 -> model：表单数据对象 是绑定我们form表单中需要提交给后台的一个对象 -> label-width：表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值 -...
【vue】form表单应用
weixin_39266845的博客
07-27 4453
【vue】form表单应用
Vue基础之表单Form(一)
qq_41720578的博客
04-13 9748
表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。Vue提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。例如下面例子: <div id="app"> <input type="text" v-model="message" placeholder="请输入...."> <p>{{message}}</p> </di
element Form表单
weixin_44016478的博客
11-09 194
Form由输入框，选择框等多控件组成 Form组件由多个表单域构成： <el-form ref="form" :v-model="form"> <el-form-item label="控件前的label名称"> <el-input v-model="form.name"></el-input> </el-form-item> <e...
基于javaweb+vue+mysql的课程管理系统源码.zip
08-22
基于javaweb+vue+mysql的课程管理系统源码.zip基于javaweb+vue+mysql的课程管理系统源码.zip基于javaweb+vue+mysql的课程管理系统源码.zip基于javaweb+vue+mysql的课程管理系统源码.zip基于javaweb+vue+mysql的课程...
javaweb+vue的共享音乐网站javaweb_vue_music.zip
04-15
音乐商城是一个在线平台，用于销售音乐作品，包括数字音乐、CD、唱片、演唱会门票等。以下是音乐商城的一般分析： ...【引流】 编程语言和开发技术：如Java、$C++、Python、JavaScript、Ruby等。 数据库技术：如关系型...
JavaWeb网页，vue+springboot+mybatisplus，老年管理平台
07-16
ElementUIPlus是基于Vue.js的UI组件库，它提供了丰富的组件如表格、按钮、对话框等，使得界面设计更加规范和高效。 **4. MyBatisPlus** MyBatisPlus是在MyBatis基础上扩展的工具，简化了SQL操作。在老年管理平台中...
java 组件库 swingx-0.9.5.jar
08-11
java 组件库 swingx-0.9.5.jar
基于vue3、Element-Plus、JavaWeb、MySQL技术实现的学生选课管理系统
05-07
Element-Plus是Element UI的升级版，它是一个基于Vue2和Vue3的组件库，提供了丰富的UI组件，如表格、按钮、对话框等，用于快速构建美观的用户界面。在Vue3中使用Element-Plus，可以进一步提升开发效率，同时保持良好...
element中form表单
weixin_57128623的博客
11-14 221
element中form表单
ElementUI Form：Form表单
ChinaDragon10的博客
02-01 1343
https://editor.csdn.net/md?not_checkout=1&spm=1001.2101.3001.5352&articleId=135977718
Element-UI框架的使用（三）-- Form 表单
weixin_57246557的博客
08-14 6746
Form 表单 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据 一、基本使用 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"&
element中的form表单整理
---
05-27 532
status-icon 是否在输入框中显示校验结果反馈图标 boolean — false <el-form status-icon > 去掉表单验证的async-validator: ["userName is required"]的警告 在node_modules/async-validator/es/util.js中找到图中console.warn(type, errors);注释掉 ...
ElementUI Form 表单
shykevin的博客
12-25 1302
一、概述 Form 表单由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据 官方链接： https://element.eleme.cn/#/zh-CN/component/form 二、典型表单 包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。 环境说明 还是以上一篇文档：https://www.cnblogs.com/xiao987334176/p/14...
vue表单Form
泗水六年的博客
08-15 620
<template> <main-area :title="title" class="fullfill"> <template v-slot:zh_title> 请填写理财签约表单 </template> <el-form label-width="100px" :model="pageData" :rules="rules" .
javaweb阅读vue
02-02
JavaWeb是一种使用Java语言开发Web应用程序的技术。而Vue是一种流行的JavaScript框架，用于构建用户界面。如果你想在JavaWeb中使用Vue，可以通过以下步骤进行： 1. 引入Vue：在你的JavaWeb项目中，可以通过在HTML文件中引入Vue的CDN链接或者将Vue的源代码下载到本地并引入到项目中。 2. 创建Vue组件：在JavaWeb项目中，你可以创建一个Vue组件来管理你的用户界面。Vue组件可以包含HTML模板、CSS样式和JavaScript逻辑。 3. 数据交互：在JavaWeb中，你可以通过Ajax或者其他方式与后端进行数据交互。你可以使用Vue提供的数据绑定和事件处理功能来实现与后端的数据交互。 4. 构建和部署：最后，你需要将你的JavaWeb项目打包成war文件，并将其部署到Web服务器上，以便用户可以访问和使用你的应用程序。 总结来说，通过在JavaWeb项目中引入Vue，并结合数据交互和组件化开发的思想，你可以实现一个具有动态交互和响应式用户界面的应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

向着五星的方向

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值