当前位置: 首页 > article >正文

vue2动态增删表单+表单验证

实现效果

<el-form>
<el-form :model="dataForm" :rules="dataRule" ref="dataForms" :label-width="formLabelWidth">
              <div class="select-box" v-for="(item, index) in dataForm.feedFormulaItems" :key="index" :value="item.key" >

              <el-form-item label="配方材料" :prop="'feedFormulaItems.'+[index]+'.externalId'" class="red-label" :rules="dataRule.externalId" >
                <div class="Vehicle-model">
                  <el-select v-model="item.externalId" clearable  placeholder="请选择配方材料">
                    <el-option v-for="items in amountlist" :key="items.id" :value="items.id" :label="items.name"></el-option>
                  </el-select>
                </div>
              </el-form-item>
              <div class="input" >
                <el-form-item :prop="'feedFormulaItems.'+index+'.weight'" :rules="dataRule.weight">
                  <el-input v-model="item.weight" placeholder="重量(千克)" clearable></el-input>
                  <i class="el-icon-remove" @click="removeDomain(item,index)" v-if="index !=0"></i>
                  <i class="el-icon-circle-plus-outline" @click="addFormItem" v-else></i>
                </el-form-item>
              </div>
            </div>
          </el-form>
</el-form>
dataForm: {
     feedFormulaItems: [
        {
          externalId:'',// id
          weight:'',//数量
        }
    ], 
 },
dataRule: {
   externalId: [
      { required: true, message: '配方材料不能为空', trigger: ["change",'blur'] }
    ],
    weight: [
      { validator: this.validate, trigger: 'blur' }
    ],
},
定义自定义验证
validate (rule, value, callBack){
      let reg =/^(0|[1-9]\d{0,11})(\.\d{1,4})?$/;
      if (value === undefined || value === "") {
        return callBack(new Error("重量不能为空必填"));
      } else if (!reg.test(value)) {
        return callBack(new Error("重量只能为正数或小数,最多4位小数"));
      }
      return callBack();
    },
// 添加一个新的表单项数据对象
    addFormItem() {
      let flage = true;
      this.dataForm.feedFormulaItems.map((item,index)=>{
        if(!item.externalId || !item.weight){
          this.$message.error(`请将配方材料中第${index+1}行的配方材料或重量填写完整`);
          flage = false
        }
      })
      if(!flage){
        return 
      }
      this.dataForm.feedFormulaItems.push({ externalId: this.dataForm.feedFormulaItems.externalId, weight:this.dataForm.feedFormulaItems.weight });
    },
    // 点击删除添加一个新的表单项数据对象
    removeDomain(item, index) {
      this.dataForm.feedFormulaItems.splice(index, 1);
    },
// 表单提交 进行双层校验
    dataFormSubmit () {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          // 表格规则验证
          this.$refs["dataForms"].validate(valids => {
            if (valids) {
              const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(255, 255, 255, 0.5)'
              });
              addformula(this.dataForm).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.visible = false;
                this.$emit('refreshDataList')
                loading.close();
              }).catch(() => {
                loading.close();
              });
            }
          })
        }
      });
    },


http://www.kler.cn/a/580873.html

相关文章:

  • WPF预览并打印FlowDocument
  • Python数据分析之数据处理与分析
  • 修改 Docker 网桥的 IP 范围
  • Oracle RAC配置原理详解:构建高可用与高性能的数据库集群
  • HTML 超链接(简单易懂较详细)
  • NO.29十六届蓝桥杯备战|string九道练习|reverse|翻转|回文(C++)
  • AI算法与应用 全栈开发 前端开发 后端开发 测试开发 运维开发
  • 【阿里云】操作系统控制台——体验与测评
  • c#面试题整理3
  • 探索高性能AI识别和边缘计算 | NVIDIA Jetson Orin Nano 8GB 开发套件的全面测评
  • FreeRTOS第18篇:FreeRTOS链表实现细节06_遍历指针(pxIndex)与调度器的高效协同
  • 2路模拟量同步输出卡、任意波形发生器卡—PCIe9100数据采集卡
  • Flutter中网络图片加载显示Image.network的具体用法
  • [免费]微信小程序(图书馆)自习室座位预约管理系统(SpringBoot后端+Vue管理端)(高级版)【论文+源码+SQL脚本】
  • Vue前端开发-Coupon组件
  • 时序数据库 InfluxDB 3.0 版本性能实测报告:写入吞吐量提升效果验证
  • 鸿蒙跨平台框架ArkUI-X
  • 后 Safe 时代:多签钱包安全新范式与防范前端攻击的新思路
  • Windows控制台函数:设置文字颜色样式函数SetConsoleTextAttribute()
  • SQL 窗口函数之lead() over(partition by ) 和 lag() over(partition by )