解决element-ui中，数据嵌套太深，表单验证拿不到值的问题

最新推荐文章于 2024-04-19 15:48:41 发布
最新推荐文章于 2024-04-19 15:48:41 发布
阅读量3.4k 收藏 5
点赞数 8
分类专栏： vue html css样式 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oilpastell/article/details/109494926
版权
vue 同时被 3 个专栏收录
16 篇文章 0 订阅
订阅专栏
html
13 篇文章 0 订阅
订阅专栏
css样式
12 篇文章 0 订阅
订阅专栏

因为后台返回的数据层次结构太深，所以在双向绑定的时候没有一一定义，最后在做验证的时候发现，数据没有定义，直接通过我们的form表单，是拿不到数据的，也做不了验证，就只能整个页面重新规范开发，这里给出应对数据嵌套太深，表单验证拿不到值的解决方法

在这里插入图片描述

oilpastell
关注
  • 8
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
ElementUI表单自动验证，获取不到表单值的解决办法
xiang_jiuxing的博客
11-07 2627
ElementUI表单自动验证，获取不到表单值的解决办法
解决vue+ element ui 表单验证有值但验证失败问题
01-19
一.如图：有值但是验证失败 二. 数据模板 prop=template> <el type=textarea v-model=form.template rows=8 placeholder=请输入数据模板 readonly=true> export default { data()
element-ui组件嵌套太狠，导致input输入无效
u013746071的专栏
04-28 4023
由于弹出框嵌套了两层，导致input输入框毫无反应；后来发现是组件套用太深，vue检测不到视图更新，在失效输入框的input事件中加 this.$forceUpdate()强制刷新； <el-form-item label="测试数据：" required> <el-input v-model="test" type="number" ...
vue-elementui表单验证一直无法获取数据问题
最新发布
m0_73958405的博客
04-19 286
vue-elementui表单验证一直无法获取数据问题，form中:movel、ref、:rules三个属性都为必需值且必须正确
element UI 中表单输入框的样式修改，深度选择器
ZPD_zpd的博客
04-02 885
输入框代码： <el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="login.name"></el-input> 修改前： 修改后 查看修改前的CSS样式： 如果我们直接在CSS中修改输入框的样式，会发现修改后的样式并没有被应用上 为了解决这个问题我也找了很多文章，发现可以用 /deep/ 深度选择器 ,也就是在选择器前面加上 /deep/ /* 使用 scoped 后，父组件的样式将不会
踩坑笔记1-elementPlus的嵌套组件拿不到ref
m0_72270036的博客
04-30 1673
dialogRefsArr.value.forEach(item => item.clearValidate()) //清空检验。最近再写项目时，使用elementPlus的tab栏组件里面嵌套一个form表单，提交表单时发现拿不到表单ref，导致无法校验。我这个是tab栏，在切换tab时清空检验和数组。dialogRefsArr.value = [] //清空数组。3.提交时，将索引传过去，遍历找到那个表单的ref进行检验。//必须先清掉校验，再将dialogRefsArr置空。
使用Element ui的from表单验证时，绑定的值无法在验证函数中获取值,恒为undefined的问题分析。
陈先生的博客
12-13 2558
在最近使用element ui的form表单功能进行开发时，通过prop绑定时，无法正确的获取value值，一直输出为undefined，通过调查发现，目前el-form的model主要用表单验证的，也就是配合el-form的rules和el-form-item的prop来使用的。上面是个错误的示范，如果把要验证的数据放在了model绑定的对象外，那么就无法获得数据，验证规则内会一直得到undefined。当你已经对该属性进行绑定后，那么接下来，你的表单的prop默认绑定的值就是model绑定的对象的值。
element-ui 表单嵌套计数器无法获得值
crazySlayer的博客
03-23 635
<el-table-column label="数量" width="200" align="center" prop="num" > <el-input-number v-model="tableData.num" :min="1" :max="10" label="描述文字"> </el-input-number> </el-table-column>.
详解element-ui中form验证杂记
10-17
在Element-UI中，表单验证是开发过程中不可或缺的一部分，特别是在构建复杂的后台管理系统时。Element-UI 提供了丰富的表单组件以及相应的验证机制，帮助开发者实现高效且友好的用户体验。本文将深入探讨Element-UI...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
element-ui-最新离线文档.zip
11-02
1. **安装与引入**：Element UI 的安装通常通过 npm 完成，但在离线环境下，你可以直接将压缩包中的 CSS 和 JS 文件引入到项目中。对于 Windows 或 Linux 用户，这尤其方便，无需额外安装 HTTP 服务器。 2. **组件...
详解element-ui 表单校验 Rules 配置 常用黑科技
12-28
指示type要使用的验证器。可识别的类型值为： string：类型必须为string。type 默认是 string // 校验 string: [ {type: 'string', message: `请输入字符串`, trigger: 'blur'} ] 测试字段 prop=string> <el v-...
element-ui的el-table和el-form嵌套使用表单校验的用法及可能出错的情况及解决方法
DcTbnk的博客
06-22 3538
el-form套el-table并校验element-ui的el-table和el-form嵌套使用表单校验element-ui动态删除表单项后导致表单验证报错"please transfer a valid prop path to form item!"隐藏浏览器控制台输出async-validator验证警告 element-ui的el-table和el-form嵌套使用表单校验 → element-ui的el-table和el-form嵌套使用表单校验 <!--添加-->
element自定义表单验证取不到值，看这四个地方
qq_42877655的博客
09-07 4780
<el-form 的 :model="V1" <el-form-item prop="V2" <el-input v-model="V1.V2" 验证 rules: { V2: [ { required: true,validator: validatePass2, trigger: 'blur' } ], }, 这四个地方的要仔细看了，保证所有的v1是一样的，所有的v2也是一样的，才能正常进行验证 ...
elementUI 表格页面层级嵌套过多不及时刷新/错位的解决办法
weixin_44805839的博客
07-12 3018
elementUI 表格页面层级嵌套过多不及时刷新/错位的解决办法
elementui 表单数据嵌套过深导致校验不了问题解决
jiangjunyuan168的博客
01-23 946
在使用 elementui 表单校验的过程中发现表单中存在嵌套多个层级的数据不能进行校验。
Vue内嵌套层级过深，el-input改变值视图无响应
daimaxiaodao的博客
01-25 685
1.v-for内绑定复杂类型数据内部值，通过input更改其值时。2.element表单或表格等组件内部，el-input绑定复杂类型数据内部值，通过input更改其值时。
elementUi 表格内输入框深拷贝问题处理
onlylele的博客
08-27 1931
问题：使用el-table 表格，其内有输入框内容，每行的表单内容设置后，不能影响其他行的数据内容； 因为el-table 表格内容编辑框的值都是直接从表格的row中取值赋值的 属于浅克隆 所以同一源里的数值也会改变； 解决方法：使用Object.assign()赋值，不要直接赋值； 效果如下： 主要代码如下： <template> <div class="system-ship-money overflow-auto"> <el-form :mo.
element ui 中表格嵌套输入框失效
noname 博客
05-21 1576
使用 element ui 中表格嵌套输入框，下拉框等，会出现无法获取数据的情况，原因是嵌套的太深了，element ui 本身给出了这种自定义复合组件的获取数据的使用方式，即通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据。 实例 <el-table :data="tableData" style="width: 100%"> <el-table-column labe
element ui Dialog 中嵌套Form表单，间距太大如何解决
05-24
可以通过修改 CSS 样式来调整 Dialog 中 Form 表单的间距，以下是一个示例： ``` css .el-dialog__body form { margin-bottom: 0; } .el-form-item { margin-bottom: 10px; } .el-form-item:last-child { margin-bottom: 0; } ``` 将以上样式添加到你的样式表中，即可减小 Dialog 中 Form 表单的间距。其中，`.el-dialog__body form` 是针对 Dialog 中的 Form 表单的样式设置，`.el-form-item` 是针对表单项的样式设置，通过设置 `margin-bottom` 属性来调整间距大小。注意，最后一个表单项的间距需要特别处理，否则可能会出现不必要的间距。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值