饿了么UI框架表格的动态增减表单项里面有坑!

最新推荐文章于 2023-01-30 18:27:14 发布
最新推荐文章于 2023-01-30 18:27:14 发布
阅读量1.6k 收藏
点赞数
文章标签： ui 前端 ViewUI
原文链接：https://juejin.im/post/5d07283de51d4556bc066f6f
版权

坑:

在这个表格的数据:model="dynamicValidateForm"和<el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'域名' + index" :key="domain.key"></el-form-item>这个:model绑定的值命名有规定(但是饿了么UI并没有给我们提示!),前面必须带着dynamic,否则页面没有想要的DOM结构!

如图:




简单的理解就是:
如果绑定的值是addForm则没有效果,绑定值换成

dynamicAddForm就有效果!

今天做项目刚好踩到了这个坑!研究了几十分钟!!!


转载于:https://juejin.im/post/5d07283de51d4556bc066f6f

weixin_34378767
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+element-ui动态生成多级表头的方法
10-18
今天小编就为大家分享一篇vue+element-ui动态生成多级表头的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
随记4-动态增减表单项
m0_48882383的博客
11-05 132
ElementUI动态增减表单项 界面如图所示： 代码如下： <el-tabs v-model="activeName" @tab-click="handleClick"> <el-row style="padding-bottom:20px;"> <el-button @click="handleInsert1">+ 新增</el-button> <el-button type="success" @click="han
饿了吗 ui 行拖拽处理
weixin_47708099的博客
03-10 1644
饿了吗ui的table表格 使用行拖拽的需求 首先 我们需要 npm install sortablejs --save-dev 安装sortable.js 在页面找到需要被拖拽的表格定义row-key为数据的唯一值 定义class类方便后续方法获取 然后在生命周期钩子运行并定义行拖拽方法即可 <el-table class="able" row-key="resId" header-cell-class-name="header-th" :data="selectedResurce" h
饿了么ui自定义表头内容
xiaokangna的博客
08-03 1083
使用方法：slot="header"代表着表头，设置表头内容，但是slot-scope="scope"需要加上，否则不会显示，然后再设置列的内容即可。工作日常分享：今天有个需求，在表头上家一个？号，还是圆圈中带一个问号。实现方法：饿了么组件库中自带的参数。......
那些年我们一起遇到过的elementui的bug
ksw000的博客
05-05 949
俗话说的好，项目大了遇到的bug自然也就多了，所以整理下自己遇到过的饿了么ui组件的bug，基于vue2的（3还没用上，用上的话再说）。 也许是饿了么不维护的原因，所以导致bug一直在，但奈何项目用啥不是我来决定，只能和大家一样再度趟雷，话不多说，直接开说吧。 输入框、选择器常见bug 问题场景： 你的输入框或是选择器组件和其他组件嵌套过深就会导致，文字输入不显示，选择选项不显示。 解决方法： vm.$forceUpdate() 迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不
vue + ElementUI（饿了么UI） ---增删改查（用localStorage存储数据+过滤搜索）--demo
DcTbnk的博客
07-25 1022
新增和修改写到了一个文件上 该目录会上传到gitee上 .eslintrc.js 最后一行是自己添加的，其余内容是脚手架自动生成的 module.exports = { root: true, env: { node: true }, extends: ['plugin:vue/essential', '@vue/standard'], parserOptions: { parser: 'babel-eslint' }, rules: { 'no-co.
Android仿饿了么加减控件，带滚动淡化效果。
最爱吃西瓜
08-23 699
Android仿饿了么加减控件，带滚动淡化效果。
基于Flutter设计的UI模板动态化框架
02-25
基于Flutter设计的UI模板动态化框架
element ui 表格动态列显示空白bug 修复方法
10-18
今天小编就为大家分享一篇element ui 表格动态列显示空白bug 修复方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Angular动态绑定样式及改变UI框架样式的方法小结
10-18
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。这篇文章主要介绍了Angular动态绑定样式及改变UI框架样式的方法小结,需要的朋友可以参考下
饿了么前端团队开源的基于Vue.js UI框架 Element-UI.zip
07-19
Element-UI，基于Vue.js 2.0的桌面UI元素。由饿了么公司前端团队开源。运行效果：用法：npm install element-ui@next示例代码：import Vue from 'vue' import Element from 'element-ui' import 'element-...
饿了么动态表格
weixin_46252229的博客
05-28 458
<template> <div> <el-button @click="add">新增一行</el-button> <el-button @click="save">保存</el-button> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="compty" label="日期" w
关于饿了么ui框架的使用之Form 表单的应用
AmberWu
05-24 9162
Element，是饿了么提供的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。
elemenUI 2.x：动态增减表单项及其涉及到的表单嵌套校验
lalala_dxf的博客
01-30 431
动态增减表单项及其表单项嵌套验证
动态增减表单详解
m0_59078472的博客
01-12 1222
不知道小伙伴们有没有做过类似的功能，效果图如下 看到这个需求的一瞬间小编瞬间陷入了思维逻辑的坑里，想着垃圾桶旁边的提示信息直接放一个插值表达式，插值表达式直接放入，上边输入框v-model绑定的值不就好了。结果做好了增加第一个表单的时候功能是没问题的，相信已经有小伙伴发现了问题所在，增加第二个表单的时候你就会发现第一个表单垃圾桶旁边的提示信息跟第二个增加的表单提示信息是一样的，而且当你上边输入框清空内有内容的时候你会惊奇的发现，两个表单垃圾桶旁边的提示信息都是空的，为什么呢？这是因为插值表达式内填
饿了么UI elementUI中的el-table勾选框设置默认勾选、禁用
Kimser
06-03 5251
最近项目中有这个一个需求：请求后端列表数据，根据数据中remark值自动设置table的勾选框的勾选状态及禁用状态， 如果remark=“1”,是勾选状态且该勾选框变为禁用状态；反之，如果remark !=“1”，则不是勾选状态且用户可以进行勾选 当用户手动进行勾选某行数据时，该操作将向后端发送请求，请求成功则该行数据所对应的的勾选框状态为勾选且禁用 难点及坑：axios请求后端数据成功时，初始化表格的时候，使用el-table的toggleRowSelection()方法设置勾选框状态一直设置..
如何动态更新el-table中的数据
weixin_44328764的博客
04-20 3383
$set动态更新el-table中的数据 解决方案 this.$set(target, key, value) target: 要更改的数据源(可以是一个对象或者数组) key: 要更改的具体数据(索引) value: 新增的值 <el-button type="text" @click="downloadResult(scope.row, scope.$index)"></el-button> 接受数据的方法 downloadResult(data,index){ data.
element ui （饿了么）table 表格获取下标
Shimeng_1989的博客
07-16 7437
<el-table-column label='序号'> <template slot-scope="scope"> <!-- 方法一 --> <span v-text="scope.$index+1"></span> <!-- 方法二 --> <!-- {{scope.$index...
antd动态增减表单项设置表单回显
最新发布
07-16
### 回答1： 在ant Design中，我们可以使用Form...总结：通过设置表单项初始值、使用`Form.List`组件实现动态增减表单项、表单项的读写绑定以及antd的自动回显功能，可以实现antd动态增减表单项并设置表单回显的需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值