页面动态循环多个form表单，并校验非空，以及大小限制

最新推荐文章于 2024-07-12 11:07:31 发布

mxlWhb

最新推荐文章于 2024-07-12 11:07:31 发布

阅读量1.5k

点赞数

分类专栏： vue vite 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42859450/article/details/127281503

版权

本文介绍如何在Vue.js应用中动态创建并循环多个form表单，同时实现非空验证和输入大小限制。通过实例代码，详细解析了表单验证规则的设置与响应式数据绑定的方法。

摘要由CSDN通过智能技术生成

重点：
1、父组件传动态渲染的表单数组给子组件
2、动态表单校验在子组件触发校验，把触发校验的方法暴露给父组件，在父组件提交表单的时候，调用子组件的方法

在这里插入图片描述

父组件模块代码
<template>
  <el-card>
    <el-form
      ref="formTop"
      :model="_form"
      label-width="150px"
      :inline="true"
      :rules="formTopRule"
    >
      <el-form-item :label="t('Upper_Keyin_Limt')" prop="upperKeyinValue">
        <el-input-number v-model="_form.upperKeyinValue" :controls="false" />
      </el-form-item>
      <el-form-item :label="t('Lower_Keyin_Limt')" prop="lowerKeyinValue">
        <el-input-number v-model="_form.lowerKeyinValue" :controls="false" />
      </el-form-item>
      <el-form-item
        style="
          position: fixed;
          bottom: 0;
          right: 50%;
          transform: translateX(-50%);
          z-index: 1;
          width: auto;
        "
      >
        <div>
          <el-button type="primary" @click="submitFormTop">{
  {
            $t('options.save')
          }}</el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-collapse v-model="chartType.chartTypeArr" @change="handleChange">
      <el-collapse-item title="Mean" name="Mean">
        <formBottomArr
          v-if="_form.spcChartDefaultUpdateVOList.length"
          :formBottomArr="
            _form.spcChartDefaultUpdateVOList.filter(
              (item) => item.chartType < 5
            )
          "
          ref="formMean"
        />
      </el-collapse-item>
      <el-collapse-item title="Single"