elemenui表格输入校验

最新推荐文章于 2022-11-18 15:05:51 发布
最新推荐文章于 2022-11-18 15:05:51 发布
阅读量199 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43263360/article/details/109515947
版权

饿了么UI表格输入及其验证

项目场景：

再使用elemenui时，时常需要表格输入及其验证

问题描述：

elementui表格输入时无法使用el-form表单验证

        <el-table
          :data="form.procDTLList"
          height="400px"
          max-height="400px"
          border
          show-header
        >
          <el-table-column label="启动条件" min-width="50">
            <template slot-scope="scope">
                <el-select
                  v-model="scope.row.cN_S_STARTUP_COND"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in statype"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
            </template>
          </el-table-column>
          <el-table-column label="起始位置类型" min-width="50">
            <template slot-scope="scope">
                <el-select
                  v-model="scope.row.cN_N_START_BIT_TYPE"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in stabitype"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
            </template>
          </el-table-column>
          <el-table-column label="起始仓库" min-width="50">
            <template slot-scope="scope">
                <el-input v-model="scope.row.cN_S_START_STOCK" placeholder="" />
            </template>
          </el-table-column>
          <el-table-column label="起始位置" min-width="50">
            <template slot-scope="scope">
                <el-input v-model="scope.row.cN_S_START_BIT" placeholder=""><i
                slot="suffix"
                @click="showdialog('cN_S_START_BIT',scope.$index)"
                class="el-input__icon el-icon-search"></i></el-input>
            </template>
          </el-table-column>
          <el-table-column label="目的位置类型" min-width="50">
            <template slot-scope="scope">
                <el-select
                  v-model="scope.row.cN_N_END_BIT_TYPE"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in stabitype"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
            </template>
          </el-table-column>
          <el-table-column label="目的仓库" min-width="50">
            <template slot-scope="scope">
                <el-input v-model="scope.row.cN_S_END_STOCK" placeholder="" />
            </template>
          </el-table-column>
          <el-table-column label="目的位置" min-width="50">
            <template slot-scope="scope">
                <el-input v-model="scope.row.cN_S_END_BIT" placeholder=""><i
                slot="suffix"
                @click="showdialog('cN_S_END_BIT',scope.$index)"
                class="el-input__icon el-icon-search"></i></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="备注" min-width="50">
            <template slot-scope="scope">
              <el-form-item>
                <el-input v-model="scope.row.cN_S_REMARK" placeholder="" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <el-button
                type="success"
                size="mini"
                icon="el-icon-circle-plus-outline"
                v-if="scope.row.show === 'true'"
                plain
                @click="pushNewEducation(scope.$index)"
              >
              </el-button>
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                plain
                @click="deleteEducation(scope.$index)"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      <el-form ref="ruleForm" label-width="100px">
        <el-form-item label-width="0">
          <el-button
            type="warning"
            style="margin-top: 20px"
            class="button"
            @click="next"
            >提交</el-button
          >
        </el-form-item>

解决方案：

这里提供一种方案 那就是使用elementui的form 用 form包裹住elementui的table 再给每一个添加验证

data()代码片。

 form: {
        procDTLList: [
          {
            cN_GUID: "",
            cN_S_PROCESS_CODE: "",
            cN_S_START_BIT: "",
            cN_S_END_BIT: "",
            cN_S_REMARK: "",
            cN_N_END_BIT_TYPE: "",
            cN_N_START_BIT_TYPE: "",
            cN_S_END_STOCK: "",
            cN_S_STARTUP_COND: "",
            cN_S_START_STOCK: "",
            ],
            show: "true",
          },
        ],
      },

添加方法()代码片。

    pushNewEducation(index) {
      console.log("index", index);
      var list = this.form.procDTLList;
      if (
        index == 0 &&
        this.form.procDTLList[index].cN_S_START_BIT !=
          this.form.procDTLList[index].cN_S_END_BIT
      ) {
        this.bit.push(this.form.procDTLList[index].cN_S_START_BIT);
        this.bit.push(this.form.procDTLList[index].cN_S_END_BIT);
        list[index].show = "false";
        list.push({
          cN_GUID: "",
          cN_S_PROCESS_CODE: this.code,
          cN_S_START_BIT: "",
          cN_S_END_BIT: "",
          cN_S_REMARK: "",
          cN_N_END_BIT_TYPE: "",
          cN_N_START_BIT_TYPE: "",
          cN_S_END_STOCK: "",
          cN_S_STARTUP_COND: "",
          cN_S_START_STOCK: "",
          procDeviceList: [
            {
              cN_SUB_PROC_GUID: "",
              cN_S_PROGRAM_CODE: "",
              cN_S_ACTION_CODE: "",
              cN_S_DEVICE_CODE: "",
              cN_S_REQ_TYPE: "",
              cN_N_PUBLISH_EVENT: "",
              show: "true",
            },
          ],
          show: "true",
        });
        list[index + 1].cN_GUID = this.newGuid();
        this.form.procDTLList[index + 1].procDeviceList[0].cN_SUB_PROC_GUID =
          list[index + 1].cN_GUID;
      } else {
        if (this.bit[0] == this.form.procDTLList[index].cN_S_END_BIT) {
          Message({
            message: "维护已结束",
            type: "success",
            duration: 3 * 1000,
          });
          return;
        }
        if (
          this.form.procDTLList[index].cN_S_START_BIT ==
          this.form.procDTLList[index].cN_S_END_BIT
        ) {
          Message({
            message: "起始目的位置错误",
            type: "error",
            duration: 3 * 1000,
          });
        } else {
          if (
            this.bit[this.bit.length - 1] ==
              this.form.procDTLList[index].cN_S_START_BIT &&
            (this.bit.indexOf(this.form.procDTLList[index].cN_S_END_BIT) ==
              -1 ||
              this.bit.indexOf(this.form.procDTLList[index].cN_S_END_BIT) == 0)
          ) {
            list[index].show = "false";
            list.push({
              cN_GUID: "",
              cN_S_PROCESS_CODE: this.code,
              cN_S_START_BIT: "",
              cN_S_END_BIT: "",
              cN_S_REMARK: "",
              cN_N_END_BIT_TYPE: "",
              cN_N_START_BIT_TYPE: "",
              cN_S_END_STOCK: "",
              cN_S_STARTUP_COND: "",
              cN_S_START_STOCK: "",
              procDeviceList: [
                {
                  cN_SUB_PROC_GUID: "",
                  cN_S_PROGRAM_CODE: "",
                  cN_S_ACTION_CODE: "",
                  cN_S_DEVICE_CODE: "",
                  cN_S_REQ_TYPE: "",
                  cN_N_PUBLISH_EVENT: "",
                  show: "true",
                },
              ],
              show: "true",
            });
            list[index + 1].cN_GUID = this.newGuid();
            this.form.procDTLList[
              index + 1
            ].procDeviceList[0].cN_SUB_PROC_GUID = list[index + 1].cN_GUID;
            if (
              !this.bit.indexOf(this.form.procDTLList[index].cN_S_END_BIT) == 0
            ) {
              this.bit.push(this.form.procDTLList[index].cN_S_END_BIT);
            }
          } else {
            Message({
              message: "位置错误",
              type: "error",
              duration: 3 * 1000,
            });
          }
        }
      }
      console.log("bit++++++", this.bit);
    },

删除代码片。

deleteEducation(index) {
      console.log("index", index);
      var list = this.form.procDTLList;
      if (index == 0) {
        this.bit.splice(0, 2);
      }
      if (index != 0 && index + 1 < this.bit.length) {
        this.bit.splice(index + 1, 1);
      }
      console.log("bit++++++", this.bit);
      if (index === 0 && list.length === 1) {
        list.splice(index, 1);
        list.push({
          cN_GUID: "",
          cN_S_PROCESS_CODE: this.code,
          cN_S_START_BIT: "",
          cN_S_END_BIT: "",
          cN_S_REMARK: "",
          cN_N_END_BIT_TYPE: "",
          cN_N_START_BIT_TYPE: "",
          cN_S_END_STOCK: "",
          cN_S_STARTUP_COND: "",
          cN_S_START_STOCK: "",
          procDeviceList: [
            {
              cN_SUB_PROC_GUID: "",
              cN_S_PROGRAM_CODE: "",
              cN_S_ACTION_CODE: "",
              cN_S_DEVICE_CODE: "",
              cN_S_REQ_TYPE: "",
              cN_N_PUBLISH_EVENT: "",
              show: "true",
            },
          ],
          show: "true",
        });
        list[0].cN_GUID = this.newGuid();
        list[0].procDeviceList[0].cN_SUB_PROC_GUID = list[0].cN_GUID;
      } else {
        list.splice(index, 1);
      }
      if (index === list.length) {
        list[index - 1].show = "true";
      }
      this.form.procDTLList = list;
    },

template内代码片。

    <el-card>
      <el-form
        :model="form"
        :rules="formdtl"
        ref="formdtl"
        label-position="left"
        label-width="10px"
      >
        <el-table
          :data="form.procDTLList"
          height="400px"
          max-height="400px"
          border
          show-header
        >
          <el-table-column label="启动条件" min-width="50">
            <template slot-scope="scope">
              <el-form-item
                :prop="'procDTLList.' + scope.$index + '.cN_S_STARTUP_COND'"
                :rules="formdtl.cN_S_STARTUP_COND"
              >
                <el-select
                  v-model="scope.row.cN_S_STARTUP_COND"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in statype"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="起始位置类型" min-width="50">
            <template slot-scope="scope">
              <el-form-item
                :prop="'procDTLList.' + scope.$index + '.cN_N_START_BIT_TYPE'"
                :rules="formdtl.cN_N_START_BIT_TYPE"
              >
                <el-select
                  v-model="scope.row.cN_N_START_BIT_TYPE"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in stabitype"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="起始仓库" min-width="50">
            <template slot-scope="scope">
              <el-form-item>
                <el-input v-model="scope.row.cN_S_START_STOCK" placeholder="" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="起始位置" min-width="50">
            <template slot-scope="scope">
              <el-form-item
                :prop="'procDTLList.' + scope.$index + '.cN_S_START_BIT'"
                :rules="formdtl.cN_S_START_BIT"
              >
                <el-input v-model="scope.row.cN_S_START_BIT" placeholder=""><i
                slot="suffix"
                @click="showdialog('cN_S_START_BIT',scope.$index)"
                class="el-input__icon el-icon-search"></i></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="目的位置类型" min-width="50">
            <template slot-scope="scope">
              <el-form-item
                :prop="'procDTLList.' + scope.$index + '.cN_N_END_BIT_TYPE'"
                :rules="formdtl.cN_N_END_BIT_TYPE"
              >
                <el-select
                  v-model="scope.row.cN_N_END_BIT_TYPE"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in stabitype"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="目的仓库" min-width="50">
            <template slot-scope="scope">
              <el-form-item>
                <el-input v-model="scope.row.cN_S_END_STOCK" placeholder="" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="目的位置" min-width="50">
            <template slot-scope="scope">
              <el-form-item
                :prop="'procDTLList.' + scope.$index + '.cN_S_END_BIT'"
                :rules="formdtl.cN_S_END_BIT"
              >
                <el-input v-model="scope.row.cN_S_END_BIT" placeholder=""><i
                slot="suffix"
                @click="showdialog('cN_S_END_BIT',scope.$index)"
                class="el-input__icon el-icon-search"></i></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="备注" min-width="50">
            <template slot-scope="scope">
              <el-form-item>
                <el-input v-model="scope.row.cN_S_REMARK" placeholder="" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <el-badge
                style="padding-right: 10px"
                :value="form.procDTLList[scope.$index].procDeviceList.length"
              >
                <el-tag
                  @click="
                    index = scope.$index;
                    indevic = true;
                  "
                  size="medium"
                  >动作</el-tag
                >
              </el-badge>
              <el-button
                type="success"
                size="mini"
                icon="el-icon-circle-plus-outline"
                v-if="scope.row.show === 'true'"
                plain
                @click="pushNewEducation(scope.$index)"
              >
              </el-button>
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                plain
                @click="deleteEducation(scope.$index)"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <el-form ref="ruleForm" label-width="100px">
        <el-form-item label-width="0">
          <el-button
            type="warning"
            style="margin-top: 20px"
            class="button"
            @click="next"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

页面图片
校验
添加多条并且校验

向东的马先生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android 输入校验源代码
04-27
android 输入校验源代码，可以用在界面输入框等元素的校验
Struts2的输入校验实例代码
08-31
主要介绍了Struts2的输入校验实例代码,非常不错，具有参考借鉴价值， 需要的朋友可以参考下
饿了么element组件库el-upload组件表单校验问题
lareinalove的博客
08-28 3126
最近在用饿了么的el-upload组件时候，需要用到表单校验，但是遇到了一个问题，如图所示： （点击提交时候触发了表单校验提示：“请上传身份证正面照”，但是上传之后表单校验提示信息无法清除。） 解决办法如下： 在有el-upload的那一个el-form-item上添加ref='xxxxx'，然后在下面的on-success方法中加上this.$refs.xxxxx.clearValid...
Elementui el-input 输入框校验以及表单校验
热门推荐
阿清的前端进阶之路
03-25 4万+
日常开发中输入框正则校验大全-------持续更新维护中.......
elementui笔记：el-table表格的输入校验
安之ccy的博客
03-01 1万+
elementui笔记：借用el-form的校验，给el-table的每行数据做校验
【elementui】el-table中的el-input校验
bidepanm的博客
08-05 4269
el-table中el-input校验的两种方法
Vue Element UI 表格中的Input输入无法展示（真解，不骗人）
Future1994的博客
11-18 4512
要给input赋值初始值
Struts2输入校验总结
04-08
Struts2输入校验总结 Struts2输入校验
页面输入校验
05-02
页面修改、添加等对基本信息进行校验，包括身份证号、手机号、其他校验等
elementUI+VUE给表格中的输入选择框添加验证
weixin_44090753的博客
10-27 2540
业务需求，需要在用element写的表格中的输入选择框加验证，如下 因为本来表格组件是table写出来的，不像form表单可以直接加prop和rules验证，一番查找之后，是先用form表单把table表格包起来 <template> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>填写参数</span> </div&
vue element table中自定义一些input的验证
u013466380的博客
12-12 1万+
官网原话 Form 组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将 Form-Item 的prop属性设置为需校验的字段名即可。 表单 el-form表单必备以下三个属性： :model="ruleForm" 绑定的数据内容 :rules="rules" 动态绑定的rules，表单验证规则 ref="ruleForm" 绑定的对象 t...
element ui在table中放入input且实现验证
qq_42099419的博客
12-29 1万+
<template> <div class="app-container" style="overflow: auto;"> <el-table :data="list" size="small" element-loading-text="Loading" border highlight-c...
表格的输入校验
llfssd的博客
08-25 708
表格验证
element-ui +Vue 解决 table 里包含表单验证
u013746071的专栏
04-30 9592
应用场景： 在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交，同时又需要对table的字段进行校验，效果如图所示： 这个校验中，最关键的问题在于如何给el-form-item 动态绑定prop。 :prop="'tableData.' + scope.$index + '.字段名'" 方法一： <template> <div class="app-con...
解决ElementUI el-table行内输入验证问题，动态增减行
CC的博客
06-17 5263
el-table动态增加行 eltable动态增加行或者删除行只需要控制对应的数组就可以实现，table绑定及控制代码如下：
vue+ElementUI 表单嵌套表格逐行校验（新增、编辑）的完美解决方案
iamlujingtao的博客
03-29 1万+
vue+ElementUI 表单嵌套表格逐行校验（新增、编辑）的完美解决方案一、成果二、要点和解决思路三、源码 一、成果 在线地址 gitHub地址 如果帮到你，请点个赞^_^ 如图，ElementUI表单里嵌套了表格，表格内每行能进行新增、编辑、删除等操作，同时能针对该行的字段进行校验（而不是整个表单校验！），这种需求应该很常见，但是搜了很多资料，没有完美的解决方案，大部分都只是针对整个表单进...
element 表格中 多个输入框 怎么校验 el-form 动态验证规则 el-table中检验多个input
z00001993的博客
07-23 6170
问题：在element表格中需要验证多个输入框，如下图： 解决：在表格中加入el-form-item，上代码 <el-form ref="form" :model="form" label-width="120px" :rules="rules"> <el-form-item label="优惠券配置：" prop="payload"> <el-table :data="form.payload" border class="padloadTable"&g.
layui表格输入数值自动计算
flame的博客
07-29 7759
开发工具与关键技术：VS2015，ASP.NET MVC 撰写时间：2019年 7 月 27 日 先开启layui表格的单元格编辑 在想要开启单元格的列中输入edit:’text’，即可开启单元格编辑 通过监听单元格事件直接获取整行的数据 比如下面的图片中数量就是开启了单元格编辑 在数量单元格中输入数字 在单元格失去焦点的时候就获取一整行的数据 再把需要的值取出来进行计算 再把计算好的值赋...
VUE+Element UI实现简单的表格行内编辑效果
weixin_33725272的博客
05-18 2510
demo 原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示 效果示例地址 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引...
dxediting 表格数据校验
最新发布
07-12
要实现表格数据校验，可以使用dxDataGrid组件提供的一些功能。以下是一个简单的示例： 1. 首先，确保你已经引入了dxDataGrid组件的依赖。 2. 在HTML中，创建一个包含表格的容器元素，例如： ```html ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值