vue2动态表单的 prop校验 多层数据结构

最新推荐文章于 2023-11-07 15:58:26 发布
最新推荐文章于 2023-11-07 15:58:26 发布
阅读量759 收藏 2
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76607997/article/details/130082444
版权

 我这里用了Collapse 折叠面板--

data里面的数据是这样的data：{form：{extraList:[ { tables: [] } ] } } 动态表单校验

这是部分代码 最下面是完整代码 表单里嵌套表格 可以新增每个表格

       <el-form-item
                    v-show="!scope.row.buttonVisible"
                    :prop="'extraList.' + i + '.tables.'+scope.$index + '.componentMinPower'"
                    :rules="tables.componentMaxPower"
                    label-width="0"
                  >
                    <el-input
                      placeholder="请输入"
                      v-model="
                        form.extraList[i].tables[scope.$index].componentMinPower
                      "
                      clearable
                      type="number"
                      oninput="value=value.replace(/^0|[^0-9]/g,'');"
                    />
                  </el-form-item>
      <el-collapse style="margin-top: 20px">
        <el-collapse-item v-for="(item, i) in form.extraList" :key="i">
          <template slot="title">
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 90%;
              "
              @click.stop=""
            >
              <div
                style="
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                "
              >
                <el-form-item
                  label="组件功率区间(W):"
                  style="margin: 0"
                  :prop="'extraList.' + i + '.minComValue'"
                  :rules="extraList.minComValue"
                  label-width="200px"
                >
                  <el-input
                    type="number"
                    placeholder="请输入比例"
                    v-model="item.minComValue"
                    oninput="value=value.replace(/^0|[^0-9]/g,'');"
                  />
                </el-form-item>
                <span style="margin: 0 5px">至</span>
                <el-form-item
                  :prop="'extraList.' + i + '.maxComValue'"
                  :rules="extraList.maxComValue"
                  label-width="0"
                  style="margin: 0"
                >
                  <el-input
                    type="number"
                    placeholder="请输入比例"
                    v-model="item.maxComValue"
                    oninput="value=value.replace(/^0|[^0-9]/g,'');"
                  />
                </el-form-item>
              </div>
              <div>
                <el-button type="text" @click.stop="TableAddRow(i)"
                  >添加一行</el-button
                >
                <el-button type="text" @click="delClass(i)">删除</el-button>
              </div>
            </div>
          </template>
          <el-table
            :data="item.tables"
            ref="table"
            row-key="keys"
            style="width: 100%"
          >
            <el-table-column label="#" type="index" width="50">
            </el-table-column>
            <el-table-column
              prop="province"
              label="组件功率区间(W)"
              align="center"
            >
              <template slot-scope="scope">
                <div style="display: flex; justify-content: center">
                  <el-form-item
                    v-show="!scope.row.buttonVisible"
                    :prop="'extraList.' + i + '.tables.'+scope.$index + '.componentMinPower'"
                    :rules="tables.componentMaxPower"
                    label-width="0"
                  >
                    <el-input
                      placeholder="请输入"
                      v-model="
                        form.extraList[i].tables[scope.$index].componentMinPower
                      "
                      clearable
                      type="number"
                      oninput="value=value.replace(/^0|[^0-9]/g,'');"
                    />
                  </el-form-item>
                  <el-form-item
                    v-show="!scope.row.buttonVisible"
                    :prop="'extraList.' + i + '.tables.'+scope.$index + '.componentMaxPower'"
                    :rules="tables.componentMaxPower"
                    label-width="0"
                  >
                    <div style="display: flex">
                      <span>至</span>
                      <el-input
                        placeholder="请输入"
                        clearable
                        type="number"
                        oninput="value=value.replace(/^0|[^0-9]/g,'');"
                        v-model="
                          form.extraList[i].tables[scope.$index]
                            .componentMaxPower
                        "
                      />
                    </div>
                  </el-form-item>
                  <span v-show="scope.row.buttonVisible">
                    {{
                      form.extraList[i].tables[scope.$index].componentMinPower
                        ? `${
                            form.extraList[i].tables[scope.$index]
                              .componentMinPower
                          }W至${
                            form.extraList[i].tables[scope.$index]
                              .componentMaxPower
                          }W`
                        : ""
                    }}
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="price"
              label="激励价格（元/块）"
              align="center"
            >
              <template slot-scope="scope">
                <div style="display: flex; justify-content: center">
                  <el-form-item
                    v-show="!scope.row.buttonVisible"
                    :prop="'extraList.' + i + '.tables.'+scope.$index + '.price'"
                    :rules="tables.price"
                    label-width="0"
                    style="width: 60%"
                  >
                    <el-input
                      type="number"
                      placeholder="请输入"
                      clearable
                      v-model="form.extraList[i].tables[scope.$index].price"
                      oninput="value=value.replace(/^0|[^0-9]/g,'');"
                    ></el-input>
                  </el-form-item>
                  <span v-show="scope.row.buttonVisible">{{
                    form.extraList[i].tables[scope.$index].price
                  }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div v-if="scope.row.buttonVisible">
                  <el-button
                    class="operation-item"
                    type="text"
                    @click="TableEdit(scope.$index, scope.row.buttonVisible, i)"
                    >编辑</el-button
                  >
                  <el-button
                    class="operation-item"
                    type="text"
                    @click="TableDelete(scope.$index, i)"
                    >删除</el-button
                  >
                </div>
                <div v-else>
                  <el-button
                    class="operation-item"
                    type="text"
                    @click="
                      TableCancel(scope.$index, scope.row.buttonVisible, i)
                    "
                    >取消</el-button
                  >
                  <el-button
                    class="operation-item"
                    type="text"
                    @click="TableSave(scope.$index, scope.row.buttonVisible, i)"
                    >保存</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>

0716*_zwj
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
12-12
前言 开发过程中遇到了一个需求，根据用户选择的联系方式，动态改变输入框的检验条件，并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com/Mrblackant. .. 思考几个问题 1.整个表单是可新增的，所以要遍历生成； 2.联系方式(手机/座机)的切换，是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则) 实现 1.elementui的form表单实现校验的时候要给当前el-form-item加上prop属性,因为我们是遍历生成的表单，那我们的写法就要写成: 重点在prop属性 <template v-
vue elementUI 表单校验功能之数组多层嵌套
12-08
在使用vue element-ui form表单渲染的时候，会遇到这样的数据结构： { "title":''123455, "email":'123456@qq.com', "list": [ { "id": "quis consequat culpa ut pariatur", "name": "et quis irure dolore ...
vue element form动态prop校验问题
coldriversnow的专栏
07-05 2530
根据条件动态添加校验的问题 动态切换prop值时不能默认为空，不然校验会失效，可以用'empty'代替空值 <el-form label-width="95px" :model="form" ref="form" :rules="rules"> <el-form-item label="总计星钻：" :prop="form.auditType===1?'score':'empty'"> <el-input class="input"
Vue的V-model和prop标签
qq_46312886的博客
05-17 842
prop标签：el-from-item 的 prop 属性必须与 el-input 中需要校验的表单属性一致。那么 el-input 绑定的元素必须是 el-form 的 model 的直接属性，否则会导致校验失败。v-model：表示指定表单使用的数据的，如果使用rules来进行表单验证的，placeholder：输入框内显示的提示信息。
el-form 中表单 动态prop 的验证
思渝崖
03-30 4076
el-form 中 表单动态prop 的验证 某天接到个需求： 1.管理页面数据时，个别字段值需要支持多语言 2.整个页面数据只能是一份 于是就是只能把form中对应的字段改成对象格式 form: any = { name: "", url: "", title: {} }; 如上代码所示，title字段是一个对象，准备用来放各个语言对应的存储字段 然后语言是可以动态...
elform-item动态prop
carbonzhao的专栏
11-07 2912
页面中显示的东西，完全是自定义组合的而不是固定的，所以此时的elform的普通prop验证已经不能满足于我们的开发要求，那如何处理呢？而针对el-from-item的prop指定就显示的尤其特别，prop为空，则意味着不需要验证，不为空则意味着需要验证！最后一步则简单多了，实现rules方法进行验证即可，我们是行间实现验证规则，你也可以参考下面的函数中验证规则，均可。可以看到，对于el-from的使用仍然是能用的规则，给他定义ref，给他定义动态的model!('请选择CRF模板'));
vue elementUI 表单校验的实现代码（多层嵌套）
10-16
主要介绍了vue elementUI 表单校验的实现代码（多层嵌套），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
动态表单：VUE动态表单
08-13
基于vue+Iview实现动态表单组件，通过拖拽组件到面板即可实现一个表单。支持各个组件的动态隐藏显示，动态表格弹窗式维护。
el-form动态表单的校验问题
全栈科学家的博客
05-30 1079
el-form-item label="份数：" :prop="`formRow.${index}.three`" :rules="rules.three">prop绑定one,two,three?
element动态表单验证prop用法
weixin_34125592的博客
06-27 5266
基于Vue的Element.js的Form组件中，提供了一个动态增减表单的验证逻辑，这在项目中的提供了很大帮助。但在实际写代码过程中，会遇到很多的坑，特别是动态添加验证规则时，prop属性不知道怎么用。 1、el-form标签的model属性必须是对象，而el-form-item里的v-model为非对象。2、el-form-item的p...
element中prop动态绑定校验
ArtGhosts的博客
09-22 1858
element动态绑定prop校验
vue2中子传父和父传子（props与emit还有ref / $refs）
a99101的博客
02-09 1359
父子组件通信
el-form 中表单 动态prop(字段多语言) 的验证
zuo_zuo_blog的博客
06-04 1150
1.form中对应的字段改成对象格式 form: any = { name: "", url: "", title: {} }; 2.如上代码所示，title字段是一个对象，准备用来放各个语言对应的存储字段 然后语言是可以动态切换的所以我prop就只能配合用语言变量 currentLang 来写 <el-form-item label="title" :prop="`title.${currentLang}`" :rules="rules.titleRule"
elementUI 表格 prop属性 如何通过判断转换值
desongzhang的博客
10-12 300
<el-table-column :label="htmlText.tbDate" width="80"> <template slot-scope="scope"> <span v-if="scope.row.createTime == 0">正常</span> //这里使用===还是==得看返回值是什么类型的，需不需要转换啥的，自己尝试一下就可以了，这样直接写也是行的，不过推荐最好使用=== <span v-e
vue2动态表单验证与表单多层嵌套验证
fangqi20170515的博客
11-11 2731
普通表单验证单项依靠的是prop…而动态生成的表单要用:prop。注意v-for，要将。
elementui中tabel组件的scope.$index的使用
m0_50441807的博客
05-09 9393
tabel组件的自定义列模板中可以使用scope.row获取当前行的数据，而scope.$index获取的是当前行的数据在数组中的索引（tabel表格绑定的数据是一个数组，数组中每一个对象就相当于一行的数据） 使用如下： <el-table-column prop="age" label="年龄"> <template slot-scope="scope"> <span @click="editor(scope.row,scope.$index)">编辑&lt
elementUI 二次封装table组件 表内有slot-scope解决方法 以及 表格的动态隐藏与显示
小手冰凉
05-16 1089
封装的组件tableList <template> <div class="contrainer"> <el-table :data="tableData" style="width: 100%; margin-top: 10px;" @selection-change="totalChange" :row-class-name="tableRowClassName" v-loading="loadding"> <el-table-co...
element ui表单校验prop的链式写法----源码分析
weixin_30266829的博客
10-10 487
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item v-for="(domain, index) in dynamicValidateForm.domains"...
antdesignvue动态添加表单必填校验
最新发布
01-17
2. 在 Vue 的 data 中定义一个表单对象，包含需要动态添加的表单控件的值。 3. 在模板中使用 Ant Design Vue 的 Form 组件，并使用 v-model 指令将表单对象和控件的值进行绑定。 4. 使用 v-for 指令遍历需要动态...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值