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

最新推荐文章于 2024-04-30 10:58:07 发布
最新推荐文章于 2024-04-30 10:58:07 发布
阅读量589 收藏 8
点赞数 7
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22187895/article/details/135520384
版权
一、一重数组的绑定
提示：
1、每一项el-form-item的prop以及rules的赋值以及data中form的结构(行内样式是为了复制直接看效果)

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

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

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

结构如下代码所示：
template


<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绑定的值不一样的，因此当只有一重数组时这两种写法都是可以的

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

: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>
三、效果如如下：(二重数组的效果，就随便弄了下不要在乎样式[/手动狗头])

三、二重数组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的绑定就有上文提到的这两种方式，因此不管是几重数组都是可以的（当然没有试过三重四重数组， 应该是可以的，当然项目中应该不会出现这种情况）

好奇的候选人面向对象
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-form-item 绑定复杂数组对象，并自定义验证
weixin_43899935的博客
03-26 6655
<div v-for="(item,index) in submitForm.classesWorkingTimes" :key="index"> <el-form-item :prop="`classesWorkingTimes[${index}].attendanceTime`" :rules="[ { ...
element form 校验数组每一项实例代码
01-21
1.校验的数据结构如下: ... <el title=title visible.sync=visable width=40% before-close=cancel> <el label-width=80px model=formData rules=formDataRules ref=... <el label=Id prop=id v-if=formData.id>
el-form双层数组遍历绑定表单校验，实现单行校验和全行校验，validate和validateField的使用
zyq_1020的博客
09-26 1478
点击保存的时候校验有没有空的，如果有空的就标红，都是动态的，这就需要用到双层数组。这里的对单行数组的校验有待优化，但是没想到好的办法，
from表单el-form-item绑定值为数组的prop写法
qq_41008008的博客
11-14 2631
prop绑定，表单校验
el-form 根据数组动态渲染的el-form-item必填校验绑定
最新发布
博客
04-30 466
3，必填校验的key要和绑定的数据key值对应，这里因为数据不多且懒得多写，直接写在template里面了：下例（:rules="[{ required: true, message: '电话号码', trigger: 'blur' }]"；4，以上都不是我一直出错的原因，我出错的原因是：data字段是单独引入的，没有和form数据对应~~注意校验是针对form表单的，所以在input的输入框加了change事件，及时同步form数据。注意：1，el-from必须绑定数据：下例（：model=form;
vue elementUI 表单校验功能之数组多层嵌套
12-08
另一种方法是直接在`el-form-item`的`prop`上使用模板字符串，来动态绑定数组中对应索引的对象字段。这可以通过以下方式实现： ```html <div v-for="(item, index) in dataFields.list" :key="index"> <el-form-...
vue - props 声明数组和对象操作
10-15
在Vue组件中声明一个接收数组的prop，可以使用`type: Array`来指定其类型。例如： ```javascript props: { array: { type: Array, default () { return [] } } } ``` 这里，`default`函数用于提供默认值...
JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）实例详解
10-15
在JavaScript中，理解赋值、浅拷贝和深拷贝的概念对于处理复杂的数据结构至关重要，尤其是涉及对象和数组时。这些概念主要与内存管理和数据复制有关。 **赋值**： 在JavaScript中，当我们使用等号（`=`）进行赋值时...
el-table，el-form在vue中封装组件化，含操作按钮和插槽.pdf
12-16
在给定的文件中，展示了如何利用Element UI库来封装`el-table`和`el-form`组件，这两个组件在管理系统的界面中非常常见，特别是用于数据展示和表单提交。 首先，我们关注`el-form`组件的封装。`el-form`用于创建...
el-form 多层级表单的实现示例
10-14
主要介绍了el-form 多层级表单的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【element-plus 给form表单的对象数组添加prop属性】
weixin_45310430的博客
10-28 3086
element-plus 给form表单的对象数组添加prop属性
elform-item动态prop
carbonzhao的专栏
11-07 3494
页面中显示的东西，完全是自定义组合的而不是固定的，所以此时的elform的普通prop验证已经不能满足于我们的开发要求，那如何处理呢？而针对el-from-item的prop指定就显示的尤其特别，prop为空，则意味着不需要验证，不为空则意味着需要验证！最后一步则简单多了，实现rules方法进行验证即可，我们是行间实现验证规则，你也可以参考下面的函数中验证规则，均可。可以看到，对于el-from的使用仍然是能用的规则，给他定义ref，给他定义动态的model!('请选择CRF模板'));
el-form的model、prop属性和表单校验等详解
weixin_45063953的博客
10-11 3194
Vue 的 el-form 提供了表单校验功能， :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。组件封装，让前端校验更方便。具体使用过程中，有几个容易出错的地方，本文来整理一下。每一个坑都是笔者亲自趟过的，写完本文后，以后应该不会再踏入相同的坑。el-form 的 model 属性 el-form 的 model 属性是用来指定表单使用的数据的，虽然 el-form 指定了 model 对象，但是，理论上，vue 并没有限制 el-input 绑定的数据，
el-form表单使用递归组件实现动态渲染&表单嵌套(输入框、下拉选择框、单选、数组、对象数组...)
song_song0927的博客
01-09 809
el-form表单嵌套表单，表单内有el-input，el-table，el-form，el-radio等组件，甚至可以更多！
vue中form表单v-model动态绑定遍历数组
Ye123456_的博客
09-03 2447
<el-formref="formDatabase":model="permissonList.bizContent":rules="rules":inline="true"label-width="120px"> <el-form-item style="display:block" v-for="(item,index)inapiManagerParameter" :label="item.parame...
el-form ：rules校验 动态绑定:prop，（包括一层遍历循环 和多层遍历循环的情况）
qq_45300842的博客
09-05 2665
el-form ：rules校验 动态绑定:prop，（包括一层遍历循环 和多层遍历循环的情况）
VUE 基础 之 数据绑定
日积月累
09-23 578
1、单项绑定 "v-bind:"或者":" 缩写：: 预期：any (with argument) | Object (without argument) 参数：attrOrProp (optional) 修饰符： .prop- 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？) .camel- (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开...
vue+element-ui el-tree 多层
weixin_42127141的博客
03-07 2056
//html部分 &lt;el-tree :load="loadNode1" lazy :props="defaultProps" accordion&gt; &lt;/el-tree&gt; //data return defaultProps: { label: 'label', children:'children', isLeaf: 'le...
el-form检验数组为空
07-12
在上面的示例中，我们通过 `ref` 属性给 `el-form` 组件命名为 `"myForm"`，并定义了一个名为 `"form"` 的数据对象，其中包含了一个数组类型的属性 `"arrayOptions"`。我们还定义了一个名为 `"rules"` 的规则对象，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值