获取 el-form 表单里的值

最新推荐文章于 2024-05-14 00:10:03 发布
最新推荐文章于 2024-05-14 00:10:03 发布
阅读量9.4k 收藏 6
点赞数 4
文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sliufua/article/details/117323611
版权

前言

老弟我看到很多直接获取表单里面值的方法 (各种遍历，非常折磨人)。在这里，我选择使用的是折中的方法获取

1. 需求

form表单组件
获取这个表单中子组件输入的值
第一个子组件是 input 输入框
第二个子组件是 select 选择器
第三个子组件是 cascader 级联选择器

2. 实现方法

数据绑定
只需要 v-model 绑定 form 表单绑定的数据就可以了
form表单
然后找到 form 表单对应的组件，直接就可以在 v-model 绑定的数据中获取到数据了
我也没明白为啥看的其他博客弄的这么复杂。。。。

sliufua
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 弹窗获取form表单输入的内容
m0_37215251的博客
06-16 2864
<el-form @submit.prevent="submit" ref="form" :model="form" label-width="80px"> <el-form-item label="类型"> <el-input v-model="form.type" name='type' id='type'></el-input> </el-form-item &.
vue获取form表单的值示例
10-16
今天小编就为大家分享一篇vue获取form表单的值示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue基于element-ui select下拉框获取value和label的值(可获取item中任意的值)
前端打工人的博客
12-24 2819
<el-form-item label="物流公司：" prop="courierCompany"> <el-select v-model="id" @change="onChange" placeholder="请选择"> <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id"> </el-option>
动态 el-form-item 并获取form的值
最新发布
D_Fortune的博客
05-14 166
【代码】动态 el-form-item 并获取form的值。
el表达式和获取form表单数据
wang_ouyangsima的博客
12-12 8329
后台： HttpSession session = req.getSession(); session.setAttribute("product", pro); 页面：        value="${product.productName}"  获取form表单数据：    req.getParameter("username")
后台表单验证 +表格获取当前行的数据
qq_59076775的博客
05-15 1093
表单验证是我们经常用到的东西，今天来看一下表单验证的实现。 <template> <div class=""> <el-form :model="form" :rules="rules" ref="form"> <el-form-item prop="name" label="姓名"> <el-input v-model="form.name"></el-input> </e
elementui的el-form和el-upload上传文件和表单数据
热门推荐
一千个读者就有一千个哈姆雷特
12-25 1万+
formData里面存储的数据形式，一对key/value组成一条数据，key是唯一的，一个key可能对应多个value。使用append()方法，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾。在使用框架封装好的http请求工具无法传输表单类型的数据，于是自己又引入了一个。注意：实例化一个formData对象,使用append()方法将数据添加到对象中。需要将一大推的数据和文件传到后台，网上看了很多例子都说的不明白，自己研究了下。就是正常的接口 文件用这个接收即可。
基于VueElementUI快速创建生成表单进行数据校验获取表单数据
08-10
基于Vue,ElementUI快速创建生成表单，进行数据校验，获取表单数据
element-ui关于获取from表单项整个对象的方法，以及this.$refs[formName].resetFields()清除失效情况
阿牛哥的博客
09-16 2768
element-ui关于获取from表单项整个对象的方法，以及this.$refs[formName].resetFields()清除失效情况
el-form如何拿到表单的实例对象
09-23 1406
只需要在el-form中，添加一个ref属性，该属性就是存放该组件的实例对象的 <template> <div> <el-form ref="loginFormRef"> <el-form-item > <el-button type="info" @click="resetLoginForm">重置</el-button> </el-form-item&
elementui Dialog form 动态获取表格数据
xiaoyue_ly的博客
12-11 2340
实现方案： 循环表格中的数据，放到dialog的form中，此时input框不能输入文字； 解决方案：为每行数据新增value: ' ' ，每行的v-model绑定为value，这样文本框就可以输入值。
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
在本场景中，使用了Element UI库的`el-form`组件来构建表单，它提供了丰富的表单元素和表单验证功能。在实现添加和编辑功能时，一个常见的挑战是如何在表单提交后清空数据，以便用户可以进行下一次操作，比如添加新...
el-form 多层级表单的实现示例
10-14
主要介绍了el-form 多层级表单的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue element el-form多表单验证.txt
09-17
在使用element-ui，想要多个表单同时验证时，可以使用promise的方法进行异步验证取得结果后再进行操作
el-form-design:一个基于element ui的可拖拽生成表单的表单设计器
05-10
el-form-design 一个基于element ui的可拖拽生成表单的表单设计器 有任何意见建议或者问题请在我 下留言 或者提 issues 我将尽最大努力解决 使用方法 # 1.安装 npm install el-form-design # or yarn install el-...
整体获取form表单内容两种方法
wy18207132013的博客
11-23 2481
js 整体获取表单的两种方法
动态表单获取某一项值
凡尘
11-09 591
动态表单获取某一项值。
element的Form表单就应该这样用
ffella的博客
12-15 843
表单里最重要的就是验证.首先在我之前的设计中，表单验证的规则是分布在每一个子项中，因此我们需要整合一下，这一块我就不赘述了，也很简单。
使用Visual Studio 2015完成表单的自动提交方式
weixin_57726512的博客
06-18 678
今天我们将使用Visual Studio 2015来完成一个表单提交，同时我们还需要使用到bootstrap和jQuery插件。 首先布局页面我们在一个div标签中嵌套一个form标签，form标签嵌套四个div标签。 第一个div标签中包含有label标签和一个input标签，label标签中的是“姓名”input标签则是用来接收传入的数据的 ...
el-form表单嵌套el-form
09-08
可以使用`el-form`表单组件嵌套另一个`el-form`表单组件。这种嵌套可以用于更复杂的表单布局和组织。 以下是一个示例代码，演示了如何嵌套`el-form`表单： ```vue <template> <el-form ref="outerForm" :model="outerForm" label-width="100px"> <el-form-item label="外层表单项"> <el-input v-model="outerForm.field1"></el-input> </el-form-item> <el-form ref="innerForm" :model="innerForm" label-width="100px"> <el-form-item label="内层表单项"> <el-input v-model="innerForm.field2"></el-input> </el-form-item> </el-form> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { outerForm: { field1: '' }, innerForm: { field2: '' } }; }, methods: { submitForm() { this.$refs.outerForm.validate((validOuterForm) => { if (validOuterForm) { // 外层表单校验通过 this.$refs.innerForm.validate((validInnerForm) => { if (validInnerForm) { // 内层表单校验通过，提交数据 console.log(this.outerForm); console.log(this.innerForm); } else { // 内层表单校验不通过 return false; } }); } else { // 外层表单校验不通过 return false; } }); } } }; </script> ``` 在上面的示例中，外层表单和内层表单都使用了`el-form`组件，并且分别定义了自己的数据模型（`outerForm`和`innerForm`）。你可以根据实际需要添加更多的表单项。 请注意，在提交表单时，需要先校验外层表单的有效性，然后再校验内层表单的有效性。只有当两个表单都校验通过时，才会提交数据。 希望这个例子对你有所帮助！如果你还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值