ViewUI表格Table嵌套From表单-动态校验数据合法性的解决方法

最新推荐文章于 2024-08-21 20:18:17 发布
原创 最新推荐文章于 2024-08-21 20:18:17 发布 · 665 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#view design

文章讲述了如何在使用原生HTML构建的表格中实现动态数据添加和输入框的实时校验，避免显示冗余的错误提示，并在Vue组件中使用`v-for`循环展示数据并进行格式化和权限控制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

项目场景：

项目需求：在表格中实现动态加减数据，并且每行表格内的输入框，都要动态校验数据，校验不通过，不让提交数据，并且由于表格内部空间较小，我仅保留红边框提示，文字提示给隐藏了，不然表格内的框会很大很难看。

如果，你需要提示的话，不要show-message属性

            <Form ref="formDynamic"
                  :model="obj"
                  :label-width="15"
                  :show-message="false" //去掉这一行代码就显示校验错误信息了
                  inline
            >

问题描述

提示：在表格中实现动态加减数据，并且每行表格内的输入框，都要动态校验数据

在这里插入图片描述

在这里插入图片描述

原因分析：

提示：这里我并没有用viewUI的table组件，用的是原生html做的表格，然后样式做成和table组件相似，我不用table组件，是因为组件限制太多，组件用v-for渲染表格达不到项目需求，并且内部prop也检测不到校验。

这边的代码是精简的，里面核心的代码就在这，如果不是很明白的话，下面有全部代码

           <Form ref="formDynamic"
                  :model="obj"
                  :label-width="15"
                  :show-message="false"
                  inline
            >
              	<table id="formDynamic" style="border:  1px solid #e8eaec;border-collapse: collapse;">
                	<th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保险费用</th>
                	<tr v-for="(item, index) in obj.modelData"
	                    :key="index"
	                    style="border:  1px solid #e8eaec"
                	>
                    <td style="border:  1px solid #e8eaec;padding: 7px">
	                    <FormItem
	                        label=" "
	                        :prop="'modelData.'+index+'.insuranceFee'"
	                        :rules="[{required: true, type:'number', message: '请输入', trigger: 'blur'},
	                        {pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: '请输入正数'}]"
	                    >
	                      <Input
	                          v-model.trim.number="obj.modelData[index].insuranceFee"
	                          :show-word-limit='true'
	                          :maxlength="10"
	                          :disabled="Boolean(flag)"
	                      ></Input>
                    	</FormItem>
	                  </td>
                  </tr>
                </table>
             </Form>

解决方案：

提示：全部代码：

  <template>
            <Form ref="formDynamic"
                  :model="obj"
                  :label-width="15"
                  :show-message="false"
                  inline
            >
              <table id="formDynamic" style="border:  1px solid #e8eaec;border-collapse: collapse;">
                <th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保险编号</th>
                <th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保险费用</th>
                <th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保险类型</th>
                <th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保险应收</th>
                <th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保险实收</th>
                <th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">保单欠款</th>
                <th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">收费开始时间</th>
                <th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">收费截止时间</th>
                <th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">备注</th>
                <th style="border:  1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9">操作</th>
                <tr v-for="(item, index) in obj.modelData"
                    :key="index"
                    style="border:  1px solid #e8eaec"
                >
                  <!--                  保险编号-->
                  <td style="border:  1px solid #e8eaec;padding: 7px">
                    <FormItem
                        label=" "
                        :prop="'modelData.'+index+'.insuranceId'"
                        style="width: 120px"
                        :rules="{required: true, message: '请输入', trigger: 'change'}">
                      <Select
                          v-if="!Boolean(flag)"
                          transfer
                          v-model="obj.modelData[index].insuranceId"
                          @on-change="changeBd(item,index)"
                      >
                        <Option
                            v-for="item in policyData"
                            :value="item.id"
                            :key="item.id"
                        >{{ item.insuranceCode }}
                        </Option
                        >
                      </Select>
                      <Input v-else :disabled='Boolean(flag)' v-model="obj.modelData[index].insuranceCode"></Input>
                    </FormItem>
                  </td>
                  <!--                  保险费用-->
                  <td style="border:  1px solid #e8eaec;padding: 7px">
                    <FormItem
                        label=" "
                        :prop="'modelData.'+index+'.insuranceFee'"
                        :rules="[{required: true, type:'number', message: '请输入', trigger: 'blur'},
                        {pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: '请输入正数'}]"
                    >
                      <Input
                          v-model.trim.number="obj.modelData[index].insuranceFee"
                          :show-word-limit='true'
                          :maxlength="10"
                          :disabled="Boolean(flag)"
                      ></Input>
                    </FormItem>
                  </td>
                  <!--                  保险类型-->
                  <td style="border:  1px solid #e8eaec;padding: 7px">
                    <FormItem
                        label=" "
                        :prop="'modelData.'+index+'.insuranceType'"
                        :rules="{required: true, message: '请输入'}">
                      <Input type="text" disabled v-model="item.insuranceType" placeholder="请输入..."></Input>
                    </FormItem>
                  </td>
                  <!--                  保险应收-->
                  <td style="border:  1px solid #e8eaec;padding: 7px">
                    <FormItem
                        label=" "
                        :prop="'modelData.'+index+'.insuranceReceivables'"
                        :rules="[{required: true, type:'number',  message: '请输入', trigger: 'blur'},
                        {pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: '请输入正数'}]"
                    >
                      <Input
                          v-model.trim.number="obj.modelData[index].insuranceReceivables"
                          @on-change="calculateCost(item,index)"
                          :show-word-limit='true'
                          :maxlength="10"
                          :disabled="Boolean(flag)"
                          @input="e => handleInput(e,'insuranceReceivables')"
                      ></Input>
                    </FormItem>
                  </td>
                  <!--                  保险实收-->
                  <td style="border:  1px solid #e8eaec;padding: 7px">
                    <FormItem
                        label=" "
                        :prop="'modelData.'+index+'.insurancePaid'"
                        :rules="[{required: true, type:'number',  message: '请输入', trigger: 'blur'},
                        {pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: '请输入正数'}]"
                    >
                      <Input
                          v-model.trim.number="obj.modelData[index].insurancePaid"
                          @on-change="calculateCost(item,index)"
                          :show-word-limit='true'
                          :maxlength="10"
                      ></Input>
                    </FormItem>
                  </td>
                  <!--                  保险欠款-->
                  <td style="border:  1px solid #e8eaec;padding: 7px">
                    <FormItem
                        label=" "
                        :prop="'modelData.'+index+'.insuranceDebt'"
                        :rules="[{required: true, validator: '',  message: '请输入',type:'number', trigger: 'blur'},
                        {pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: '请输入正数'}]"
                    >
                      <Input
                          v-model.trim.number="obj.modelData[index].insuranceDebt"
                          disabled=""
                      ></Input>
                    </FormItem>
                  </td>
                  <!--                  收费开始时间-->
                  <td style="border:  1px solid #e8eaec;padding: 7px">
                    <FormItem
                        label=" "
                        :prop="'modelData.'+index+'.startTime'"
                        :rules="{required: true, message: '请输入'}">
                      <DatePicker type="date"
                                  transfer
                                  format="yyyy-MM-dd"
                                  @on-change="obj.modelData[index].startTime = $event, setOptions($event,item,index,'start')"
                                  placeholder="开始时间"
                                  v-model="obj.modelData[index].startTime"
                                  :disabled="Boolean(flag)"
                      >
                        <!--                    @on-change="modelData[index].startTime = $event"-->
                      </DatePicker>
                    </FormItem>
                  </td>
                  <!--                  收费截止时间-->
                  <td style="border:  1px solid #e8eaec;padding: 7px">
                    <FormItem
                        label=" "
                        :prop="'modelData.'+index+'.endTime'"
                        :rules="{required: true, message: '请输入'}">
                      <DatePicker type="date"
                                  transfer
                                  format="yyyy-MM-dd"
                                  :options='timeOptions[timeIndex]'
                                  placeholder="截止时间"
                                  @on-change="obj.modelData[index].endTime = $event"
                                  @on-open-change="setOptions($event,item,index, 'end')"
                                  v-model="obj.modelData[index].endTime"
                                  :disabled="Boolean(flag)"
                      >
                      </DatePicker>
                    </FormItem>
                  </td>
                  <!--                  备注-->
                  <td style="border:  1px solid #e8eaec;padding: 7px">
                    <FormItem
                        label=""
                        :label-width="0"
                        :prop="'modelData.'+index+'.remark'"
                    >
                      <Input
                          v-model="obj.modelData[index].remark"
                          :show-word-limit='true'
                          :maxlength="100"
                          :disabled="Boolean(flag)"
                      ></Input>
                    </FormItem>
                  </td>
                  <!--                  操作-->
                  <td style="border:  1px solid #e8eaec;padding: 0px 7px 0px 7px;width: 180px;text-align: center">
                    <Button type="primary" style="" @click="cuteFTP(row,index)"
                            v-permission="'alliance:business:record:insurance:upload'"
                    >上传
                    </Button>
                    <Poptip
                        v-if="!flag"
                        confirm
                        :transfer="true"
                        title="你确定删除吗？"
                        @on-ok="delInsurance(index)"
                    >
                      <Button type="error">
                        <Icon type="md-trash"/>
                        删除
                      </Button>
                    </Poptip>
                  </td>
                </tr>
              </table>
            </Form>
          </template>
vue2 - 实现elementUI表格组件table动态添加或删除行功能，表格列表动态新增/插入/删除表格行，可编辑单元格/点击修改表格内数据并更新数据列表（支持接口懒加载、表格分页、复杂嵌套表格）
高级前端工程师
12-21 6606
vue2，element-ui，表格Table组件，el-table，动态表格，实现表格动态增加/删除/编辑表格行，带有校验规则，自定义表格增删改查，动态表格动态数据新增修改删除，表格可编辑单元格自定义数据化结构新增删除取消，动态数据表格，表格动态添加或删除行，查询重置新增编辑回显删除，行内编辑功能，vue2+Element ui动态生成表格，并实现内容可编辑，如何实现表格动态增加/删除/编辑表格行(带校验规则)，数据有分页，懒加载如何更新，嵌套带下级的表格如何更新，不调用api接口怎么更新数据，示例代码，
使用iview(viewUI)Table组件添加图片，元素整理
HwH66998的博客
08-11 1360
首先，图片地址用的是attrs而不是props。 { title: '考题', key: 'exam_topic', width: 200, render: (h, params) => { return h('div', [ h('span', params.row.exam_topic), h('Icon', {
iview/view UI 表格+表单提交必填验证简单方案
AbigButton的博客
12-13 928
iview/view UI 表格+表单提交必填验证简单方案
表单嵌套表格,实现表格行内表单的校验
lf811的博客
11-09 2185
随着element ui的使用,很多业务场景的实现,往往需要多个组件嵌套使用来实现;前段时间,为了实现表格中的每一行的数据进行校验的同时实现添加多个的需求;
使用element-ui中的el-form和el-table嵌套实现表格内容编辑并提交表格表单数据校验(可以对勾选到的表格内容必填校验+勾选框)
热门推荐
LewisRoc的博客
08-23 1万+
表格内有表单项支持编辑、保存时能对复选框勾选的部分表格数据进行表单校验
Vue中 对Table表格中的输入项进行校验
晓风揽月
12-22 1万+
项目开发中，经常会遇到在场景：对table表格的输入项字段进行校验，同时提交时整体校验，效果如图所示： Table: ！！这个校验的实现，主要思路是：1.From表单中嵌套使用table表格，用表单的校验机制实现校验； 2.ivu-form-item元素，绑定动态prop; html代码如下，本次项目里样式用了 View UI ，element其他，也同样适用这个校验方法： <template> <div class="wrapper"> <...
Vue3 使用 el-form 嵌套 el-table 进行单条数据的表单校验
前端学步
08-21 1483
在实际开发过程中，我们经常需要处理表格中的表单数据，比如在编辑表格中的某一行数据时进行校验。本文将介绍如何在 Vue3 和 Element Plus 中实现这一功能。在这个例子中，我们使用了一个名为formObj的响应式对象来存储表格的数据。formObj包含一个名为list的数组，数组中的每个元素都代表表格中的一行。通过上述方法，我们可以实现在 Vue3 中使用 Element Plus 的组件嵌套
vue elementUI 表单校验功能之数组多层嵌套
12-08
这两种方法都可以有效地解决数组多层嵌套的表单校验问题。选择哪种方法取决于项目的需求和个人喜好。第一种方法使用了更明确的子`el-form`，而第二种方法则保持了外部结构的简洁性。 总结一下，处理Vue Element UI...
el-table树形表格表单验证(列表生成序号)
11-20
这里我们讨论的是如何在基于Element UI库的`el-table`组件中实现树形表格的表单验证，以及如何为树形列表生成唯一的序号。Element UI是一个流行的Vue.js组件库，提供了丰富的UI元素和功能，包括表格、表单等。 首先...
vue table+form 表格+表单动态增加一行 数据 并进行数据校验
qq_55961367的博客
07-08 967
表格+表单动态增加一行，加上表单的数据校验，进行新增编辑时，表格为输入框，展示数据时，表格为文本框
iview实现表格动态添加输入框校验
996程序员的自我修养
03-08 3663
需求描述 1.有一个表格，里面能展示原有数据，同是也能在表格中动态增加一行输入框 2.增加的每个输入框，要动态添加表格的验证，以及表单数据的绑定 3.为了样式统一，使用iview的ui框架 主要难点 让表格中同时展示原有数据和新增的输入框 新增的输入框，动态绑定表单数据 输入框动态增加校验 实现方式 1.使用Table组件，创建表格，绑定好表格列的定义, 使用tableColums变量表示 <Table :columns="tableColums" > </Tabl
Vue2中 对Table表格中的输入项进行校验
kk7564335的博客
04-18 1112
【代码】Vue2中 对Table表格中的输入项进行校验。
Vue中对From表单中的Table表格中的输入项进行验证
xiaojun081004的博客
10-09 1万+
在实际使用中经常会遇到需要在From表单中使用table表格进行表单提交，同时又需要对From表单中的字段进行校验，效果如图所示： 这个校验中，最关键的问题在于如何给el-form-item 动态绑定prop。 好了，话不多说直接上代码(html) &amp;lt;template&amp;gt; &amp;lt;div class=&quot;app-container&quot;&amp;gt; &amp;lt;div class=&am
UITablerView(表视图基础)
P_igMiHu的博客
12-09 528
一：UITableView的代理，数据源代理 二：UITableView的单组数据与多组数据的展示 三：UITableViewCell的常见属性以及Cell重用机制 1:UITableView是开发中用到频率最高的视图控件。 要使用UITableView显示数据必须设置其的代理以及数据源代理,没有设置代理预计数据源代理的UITableView都是空壳。 遵守代理
form嵌套table表单验证
Xiaochen1239的博客
01-15 1533
table嵌套form表单验证
iview/view-design+vue2实现表单校验
ZLY_2004的博客
11-24 2559
iview是一款基于Vue.js的开源UI组件库，提供了丰富的组件和样式，支持响应式布局和多语言环境。它使用了最新的前端技术，如ES6、Webpack和SASS，让开发者可以快速构建高质量的Web应用程序。View-design是一款基于Vue.js的开源UI组件库，它的设计理念是简单、易用、美观。它提供了众多的组件，如按钮、表单、弹窗、表格等，并且还支持多种主题和组件扩展，开发者可以根据自己的需求进行定制。俩者之间主要的区别是vue的版本不同，这里以vue2为例实现代码。
多层表单嵌套的验证
qq_32578989的博客
11-11 1727
vue中动态表单验证
el-table 动态设置是否表单验证
kxmdjqq的博客
08-15 270
【代码】el-table 动态设置是否表单验证。
前端框架view UI(iview) table表格增删改查 导入导出
m0_49789433的博客
07-05 1605
一、前言 线上体验：http://121.43.41.227:8080/ 源码地址： https://pan.baidu.com/s/1_jjCQAb9TjAp1F7ZcNoaxw 提取码：6666 参考过的文章： https://blog.csdn.net/qq_38225558/article/details/90582316 https://www.cnblogs.com/LinWenQiang/p/11876822.html 二、前置条件 使用 npm 来安装 ...
动态el-table里面嵌套el-form校验必填自动滑到没填文本框
最新发布
04-01
### 实现嵌套表单的必填项校验并自动滚动到未填写文本框 在 `Element UI` 中，当需要在一个嵌套结构（如 `el-table` 和 `el-form` 组合）中实现必填项校验，并且希望自动滚动到未填写的文本框时，可以按照以下方式进行设计。 #### 1. **解决输入框失去焦点问题** 如果遇到 `el-input` 输入一个字后失去焦点的情况，通常是因为动态渲染引起的。可以通过调整 `key` 属性来解决问题。例如，在表格中的每一行设置唯一的索引作为 `key` 值[^1]： ```html <el-table :data="tableData"> <el-table-column prop="name" label="名称"> <template slot-scope="scope"> <el-form-item :prop="'rows.' + scope.$index + '.name'" :rules="rules.nameRules"> <el-input v-model="scope.row.name" :key="scope.$index"></el-input> </el-form-item> </template> </el-table-column> </el-table> ``` 通过上述方式，确保每次渲染都基于固定的索引来绑定数据，从而避免因频繁重绘而导致的失焦现象。 --- #### 2. **嵌套表单的校验逻辑** 对于嵌套表单的校验，可以在父级 `el-form` 上定义统一的校验规则，并针对子组件内的字段进行路径映射。以下是完整的代码示例： ```html <el-form ref="formRef" :model="formData" :rules="rules"> <el-table :data="formData.rows"> <el-table-column prop="name" label="名称"> <template slot-scope="scope"> <el-form-item :prop="'rows.' + scope.$index + '.name'" :rules="rules.nameRules"> <el-input v-model="scope.row.name"></el-input> </el-form-item> </template> </el-table-column> </el-table> <!-- 提交按钮 --> <el-button type="primary" @click="submitForm">提交</el-button> </el-form> ``` 其中，`formData` 是整个表单的数据模型，而 `rules` 定义了具体的校验规则： ```javascript export default { data() { return { formData: { rows: [ { name: '' }, { name: '' } ] }, rules: { nameRules: [{ required: true, message: '请输入名称', trigger: 'blur' }] } }; }, methods: { submitForm() { this.$refs.formRef.validate(valid => { if (valid) { console.log('提交成功'); } else { // 失败后的处理逻辑 this.scrollToFirstError(); return false; } }); }, scrollToFirstError() { setTimeout(() => { const isError = document.querySelectorAll('.el-form-item.is-error'); if (isError.length > 0) { isError[0].scrollIntoView({ behavior: 'smooth' }); } }, 100); } } }; ``` 在此代码中，`scrollToFirstError` 方法会在校验失败后延迟执行，以等待 Vue 更新 DOM 结构后再定位错误位置[^3]。 --- #### 3. **优化 ESLint 配置以支持代码风格一致性** 为了保持项目代码的一致性和可维护性，建议配置 ESLint 来规范化代码格式。具体操作如下： - 创建 `.eslintrc.js` 文件： ```javascript module.exports = { root: true, env: { node: true }, extends: ['plugin:vue/essential', '@vue/prettier'], parserOptions: { ecmaVersion: 2020 }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', quotes: ['error', 'single'], // 使用单引号 semi: ['error', 'always'] // 强制分号结尾 } }; ``` 此配置禁用了不必要的语法规则，并强制使用单引号和分号结束语句[^2]。 --- #### 总结 以上方案解决了以下几个核心问题： 1. 动态渲染导致的输入框失焦问题； 2. 嵌套表单的校验逻辑及其自动化处理； 3. 通过 JavaScript 调整页面视图至首个错误字段的位置； 4. 设置合理的 ESLint 规范以提升团队协作效率。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

骆骆爱学习

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

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

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

打赏作者

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

抵扣说明：

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

余额充值