1. Toy模板网首页
  2. > Toy博客

el-form中数组(一重数组、二重数组以及多重数组)绑定检验的实例（prop以及rules的赋值）

9月前 作者：snows_l 分类：Toy博客 阅读(36) 违法举报

这篇具有很好参考价值的文章主要介绍了el-form中数组(一重数组、二重数组以及多重数组)绑定检验的实例（prop以及rules的赋值）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

友情提示：如果想需要el-table里面每一行的每个字段都需要进行校验的，请参参考这一下文章

ElementUI el-table动态增减行，通过el-from实现el-table行内输入验证-CSDN博客https://blog.csdn.net/snows_l/article/details/134050576?spm=1001.2014.3001.5502

一、一重数组的绑定
提示：

1、每一项el-form-item的prop以及rules的赋值以及data中form的结构(行内样式是为了复制直接看效果)

2、注意看users以及mobile的prop绑定的值不一样的，因此当只有一重数组时这两种写法都是可以的

  1. :prop="'users[' + index + '].userName'"

  1. :prop="'users.' + index + '.mobile'"

结构如下代码所示：
template
<!--
 * @Description: ------ 文件描述 ------
 * @Creater: snows_l snows_l@163.com
 * @Date: 2023-02-12 14:02:00
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2023-02-12 14:24:00
 * @FilePath: /vue2-js/src/components/elForm.vue
-->
<template>
  <div class="container-warp">
    <el-form :model="form" ref="form" :rules="rules" label-width="240px" :inline="false" size="normal">
      <el-form-item label="联系人及手机号码">
        <div class="name-phone">
          <div
            style="display: flex; align-items: center"
            class="item"
            v-for="(item, index) in form.users"
            :key="item.id">
            <el-form-item :prop="'users[' + index + '].userName'" :rules="rules.userName">
              <el-input v-model="item.userName" size="small" placeholder="请输入联系人" />
            </el-form-item>
            <el-form-item style="margin: 0 10px" :prop="'users.' + index + '.mobile'" :rules="rules.mobile">
              <el-input v-model="item.mobile" size="small" placeholder="请输入手机号码" />
            </el-form-item>
            <i
              style="font-size: 20px"
              class="icon"
              :class="index == 0 ? 'el-icon-circle-plus-outline' : 'el-icon-circle-close'"
              @click="addUser(index)"></i>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
script

<script>
  export default {
    name: '',
    data() {
      return {
        form: {
          users: [
            {
              userName: '',
              mobile: null
            }
          ],
          otherInfn: null
        },
        rules: {
          userName: [{ required: true, message: '请输入联系人' }],
          mobile: [{ required: true, message: '请输入手机号' }]
        }
      };
    },

    created() {},

    methods: {
      onSubmit() {
        console.log('-------- form --------', this.form);
        this.$refs['form'].validate(valid => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  };
</script>

<style scoped>
  .container-warp {
    width: 100%;
    height: 100%;
  }
</style>
二、二重数组的绑定
提示：

1、注意看users以及mobile的prop绑定的值不一样的，因此当只有一重数组时这两种写法都是可以的

  1. :prop="'users[' + index + '].list[' + i + '].attr2'"

  1. :prop="'users.' + index + '.list.' + i + '.attr1'"

结构如下代码所示：
template
<template>
  <div class="container-warp">
    <span style="font-size: 16px; font-weight: 500">form表单的二重数组验证</span>
    <el-form :model="form" ref="form" :rules="rules" label-width="240px" label-position="top" :inline="false" size="normal">
      <div class="pingpu" style="display: flex; justify-content: space-around">
        <el-form-item label="第一层数据1" prop="data1">
          <el-input v-model="form.data1" @input="e => e.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" placeholder="请输入" size="normal"></el-input>
        </el-form-item>
        <el-form-item label="第一层数据2" prop="data2">
          <el-input v-model="form.data2" @input="e => e.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" placeholder="请输入" size="normal"></el-input>
        </el-form-item>
        <el-form-item label="第一层数据3" prop="data3">
          <el-input v-model="form.data3" @input="e => e.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" placeholder="请输入" size="normal"></el-input>
        </el-form-item>
      </div>
      <el-form-item label="基础信息users -- 一重数组">
        <el-button type="primary" size="small" @click="handleUser">添加一个users</el-button>
        <div class="name-phone">
          <!-- 第一重数组 -->

          <div class="item" v-for="(item, index) in form.users" :key="item.id">
            <span>用户{{ index + 1 }}</span>
            <div class="user-box" style="margin: 10px 0; padding: 20px; border: 1px solid #999">
              <el-form-item :label="'联系人'" label-position="right" :prop="'users[' + index + '].userName'" :rules="rules.userName">
                <el-input v-model="item.userName" size="small" placeholder="请输入联系人" />
              </el-form-item>

              <el-form-item :label="'手机号'" label-position="right" :prop="'users.' + index + '.mobile'" :rules="rules.mobile">
                <el-input v-model="item.mobile" size="small" placeholder="请输入手机号码" />
              </el-form-item>

              <el-button type="primary" size="small" style="margin: 20px 0 10px 0" @click="handleUserOtherInfor(index)">添加用户{{ index + 1 }}其他信息</el-button>

              <!-- 第二重数组 -->
              <div class="other-info" style="border: 1px solid #eee">
                <el-form-item label="其他信息List -- 二重数组" style="margin: 40px">
                  <div class="other-info-container" style="display: flex" v-for="(single, i) in form.users[index].list" :key="i">
                    <el-form-item style="margin-right: 20px" label="其他信息1" size="normal" :prop="'users.' + index + '.list.' + i + '.attr1'" :rules="rules.attr1">
                      <el-input v-model="single.attr1" size="small" placeholder="请输入其他信息1" />
                    </el-form-item>
                    <el-form-item label="其他信息2" size="normal" :prop="'users[' + index + '].list[' + i + '].attr2'" :rules="rules.attr2">
                      <el-input v-model="single.attr2" size="small" placeholder="请输入其他信息2" />
                    </el-form-item>
                  </div>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="onSubmit">立即创建</el-button>
        <el-button size="small">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
script

<script>
export default {
  name: '',
  data() {
    return {
      form: {
        data1: '',
        data2: '',
        data3: '',
        users: [
          {
            userName: '',
            mobile: null,
            otherInfn: null,
            list: [{ attr1: null, attr2: null }]
          }
        ],
        otherInfn: null
      },
      rules: {
        data1: [{ required: true, message: '请输入第一层数据1' }],
        data2: [{ required: true, message: '请输入第一层数据2' }],
        data3: [{ required: true, message: '请输入第一层数据3' }],
        userName: [{ required: true, message: '请输入联系人' }],
        mobile: [{ required: true, message: '请输入手机号' }],
        attr1: [{ required: true, message: '请输入其他信息1' }],
        attr2: [{ required: true, message: '请输入其他信息2' }]
      }
    };
  },

  created() {},

  methods: {
    onSubmit() {
      console.log('-------- form --------', this.form);
      this.$refs['form'].validate(valid => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleUser() {
      this.form.users.push({
        userName: '',
        mobile: null,
        otherInfn: null,
        list: [
          { attr1: null, attr2: null },
          { attr1: null, attr2: null }
        ]
      });
    },

    handleUserOtherInfor(index) {
      this.form.users[index].list.push({ attr1: null, attr2: null });
    },
    changeData(e) {
      console.log('-------- e --------', e);
    }
  }
};
</script>
三、效果如如下：(二重数组的效果，就随便弄了下不要在乎样式[/手动狗头])
el-form中数组(一重数组、二重数组以及多重数组)绑定检验的实例（prop以及rules的赋值）

图1：初始效果

el-form中数组(一重数组、二重数组以及多重数组)绑定检验的实例（prop以及rules的赋值）

图2：校验的效果

el-form中数组(一重数组、二重数组以及多重数组)绑定检验的实例（prop以及rules的赋值）

图3：添加用户 -> 添加用户其他信息的效果

三、二重数组vue完整文件（二重数组也包含了一重数组的）

<template>
  <div class="container-warp">
    <span style="font-size: 16px; font-weight: 500">form表单的二重数组验证</span>
    <el-form :model="form" ref="form" :rules="rules" label-width="240px" label-position="top" :inline="false" size="normal">
      <div class="pingpu" style="display: flex; justify-content: space-around">
        <el-form-item label="第一层数据1" prop="data1">
          <el-input v-model="form.data1" @input="e => e.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" placeholder="请输入" size="normal"></el-input>
        </el-form-item>
        <el-form-item label="第一层数据2" prop="data2">
          <el-input v-model="form.data2" @input="e => e.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" placeholder="请输入" size="normal"></el-input>
        </el-form-item>
        <el-form-item label="第一层数据3" prop="data3">
          <el-input v-model="form.data3" @input="e => e.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" placeholder="请输入" size="normal"></el-input>
        </el-form-item>
      </div>
      <el-form-item label="基础信息users -- 一重数组">
        <el-button type="primary" size="small" @click="handleUser">添加一个users</el-button>
        <div class="name-phone">
          <!-- 第一重数组 -->

          <div class="item" v-for="(item, index) in form.users" :key="item.id">
            <span>用户{{ index + 1 }}</span>
            <div class="user-box" style="margin: 10px 0; padding: 20px; border: 1px solid #999">
              <el-form-item :label="'联系人'" label-position="right" :prop="'users[' + index + '].userName'" :rules="rules.userName">
                <el-input v-model="item.userName" size="small" placeholder="请输入联系人" />
              </el-form-item>

              <el-form-item :label="'手机号'" label-position="right" :prop="'users.' + index + '.mobile'" :rules="rules.mobile">
                <el-input v-model="item.mobile" size="small" placeholder="请输入手机号码" />
              </el-form-item>

              <el-button type="primary" size="small" style="margin: 20px 0 10px 0" @click="handleUserOtherInfor(index)">添加用户{{ index + 1 }}其他信息</el-button>

              <!-- 第二重数组 -->
              <div class="other-info" style="border: 1px solid #eee">
                <el-form-item label="其他信息List -- 二重数组" style="margin: 40px">
                  <div class="other-info-container" style="display: flex" v-for="(single, i) in form.users[index].list" :key="i">
                    <el-form-item style="margin-right: 20px" label="其他信息1" size="normal" :prop="'users.' + index + '.list.' + i + '.attr1'" :rules="rules.attr1">
                      <el-input v-model="single.attr1" size="small" placeholder="请输入其他信息1" />
                    </el-form-item>
                    <el-form-item label="其他信息2" size="normal" :prop="'users[' + index + '].list[' + i + '].attr2'" :rules="rules.attr2">
                      <el-input v-model="single.attr2" size="small" placeholder="请输入其他信息2" />
                    </el-form-item>
                  </div>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="onSubmit">立即创建</el-button>
        <el-button size="small">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      form: {
        data1: '',
        data2: '',
        data3: '',
        users: [
          {
            userName: '',
            mobile: null,
            otherInfn: null,
            list: [{ attr1: null, attr2: null }]
          }
        ],
        otherInfn: null
      },
      rules: {
        data1: [{ required: true, message: '请输入第一层数据1' }],
        data2: [{ required: true, message: '请输入第一层数据2' }],
        data3: [{ required: true, message: '请输入第一层数据3' }],
        userName: [{ required: true, message: '请输入联系人' }],
        mobile: [{ required: true, message: '请输入手机号' }],
        attr1: [{ required: true, message: '请输入其他信息1' }],
        attr2: [{ required: true, message: '请输入其他信息2' }]
      }
    };
  },

  created() {},

  methods: {
    onSubmit() {
      console.log('-------- form --------', this.form);
      this.$refs['form'].validate(valid => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleUser() {
      this.form.users.push({
        userName: '',
        mobile: null,
        otherInfn: null,
        list: [
          { attr1: null, attr2: null },
          { attr1: null, attr2: null }
        ]
      });
    },

    handleUserOtherInfor(index) {
      this.form.users[index].list.push({ attr1: null, attr2: null });
    },
    changeData(e) {
      console.log('-------- e --------', e);
    }
  }
};
</script>

<style scoped>
.container-warp {
  padding: 20px;
}
.el-input {
  max-width: 400px;
}
</style>
四、总结：

prop的绑定就有上文提到的这两种方式，因此不管是几重数组都是可以的（当然没有试过三重四重数组， 应该是可以的，当然项目中应该不会出现这种情况）文章来源地址https://www.toymoban.com/news/detail-507657.html

到了这里，关于el-form中数组(一重数组、二重数组以及多重数组)绑定检验的实例（prop以及rules的赋值）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • el-form自定义校验规则

    Vue 的 el-form 组件可以使用自定义校验规则进行表单验证。自定义校验规则可以通过传递一个函数来实现，该函数接受要校验的字段的值作为参数，并返回一个布尔值或一个 Promise 对象。 下面是一个示例，演示如何在 el-form 中使用自定义校验规则： 在上述例子中，我们定义了

    2024年02月12日
    浏览(43)

  • el-form前端表单校验步骤详细

    (1)，Form组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可。 (2)，data-return里面加上formData,在这里写上限定条件，通过rules属性传入约定的验证规则 (3)，提交验证 例子：

    2024年02月16日
    浏览(49)

  • el-form表单el-form-item prop一次验证两个值

    1.表单添加两个框，prop写上 2.data里写,验证规则添加validator: this.validateFields 3.validateFields设置

    2024年02月10日
    浏览(43)

  • Vue： el-form 自定义校验规则

    Vue 的 el-form 组件可以使用自定义校验规则进行表单验证。自定义校验规则可以通过传递一个函数来实现，该函数接受要校验的字段的值作为参数，并返回一个布尔值或一个 Promise 对象。 下面是一个示例，演示如何在 el-form 中使用自定义校验规则： 在上述例子中，我们定义了

    2024年02月12日
    浏览(46)

  • (vue)el-form表单隐藏校验星号

    写法：

    2024年02月08日
    浏览(46)
  • 封装通用el-form表单（2种方式）

    封装通用el-form表单（2种方式）

              项目地址：git clone form-demo: 封装通用el-form         一个后台管理系统最常见的是 表单 ，表单最常见的是 输入框、下拉选择、日期选择、单选、复选框 等等， 系统添加若干模块，就复制粘贴若干个 el-form、el-form-item ，有一说一，完成需求快是快，但是代码冗

    2024年02月09日
    浏览(40)

  • elementUI中的el-form常用校验规则

    elementUI中的el-form常用校验规则: 校验使用方式： 常用的校验规则：

    2024年02月07日
    浏览(41)
  • 【element】解决el-form和el-form-item不在同一行显示的问题

    【element】解决el-form和el-form-item不在同一行显示的问题

    页面效果： 解决方法： 给el-form-item设置label-witdh属性，调节width 页面效果：

    2024年02月12日
    浏览(52)

  • el-form动态检验无法生效问题（已解决）

    要对el-form里面的字段动态生成校验规则，测试了一系列的骚操作也无法生效，要么是require视图生效了，校验规则还是不生效;看了csdn里面好多方案，都是废话，废话，直接上硬货，最终总结如下： 需求描述：选择审核结果为\\\"N\\\"，不通过时，审核意见为必填，否则为不必填。

    2024年02月07日
    浏览(36)
  • el-form实现其中一个填写即可的校验

    el-form实现其中一个填写即可的校验

       

    2024年02月13日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包