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

移动开发 2023-06-05 14:32:20 阅读次数: 0

一、一重数组的绑定

提示：

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 [email protected]
 * @Date: 2023-02-12 14:02:00
 * @LastEditors: snows_l [email protected]
 * @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
<!--
 * @Description: ------ 文件描述 ------
 * @Creater: snows_l [email protected]
 * @Date: 2023-02-12 14:02:00
 * @LastEditors: snows_l [email protected]
 * @LastEditTime: 2023-02-22 16:39:30
 * @FilePath: /vue2-js/src/components/elForm.vue
-->
<template>
  <div class="container-warp">
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-width="240px"
      label-position="top"
      :inline="false"
      size="normal">
      <el-form-item label="基础信息users">
        <div class="name-phone">
          <!-- 第一重数组 -->
          <div class="item" v-for="(item, index) in form.users" :key="item.id">
            <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"
              style="margin: 0 10px"
              :prop="'users.' + index + '.mobile'"
              :rules="rules.mobile">
              <el-input v-model="item.mobile" size="small" placeholder="请输入手机号码" />
            </el-form-item>

            <!-- 第二重数组 -->
            <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>
      </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,
              list: [
                { attr1: null, attr2: null },
                { attr1: null, attr2: null }
              ]
            }
          ],
          otherInfn: null
        },
        rules: {
          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;
          }
        });
      }
    }
  };
</script>

<style scoped>
  .container-warp {
    width: 100%;
    height: 100%;
  }
</style>

三、效果如如下：(就随便弄了下不要在乎样式[/手动狗头])

图1

图2

图3

三、vue完整文件

<!--
 * @Description: ------ 文件描述 ------
 * @Creater: snows_l [email protected]
 * @Date: 2023-02-12 14:02:00
 * @LastEditors: snows_l [email protected]
 * @LastEditTime: 2023-02-22 16:39:30
 * @FilePath: /vue2-js/src/components/elForm.vue
-->
<template>
  <div class="container-warp">
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-width="240px"
      label-position="top"
      :inline="false"
      size="normal">
      <el-form-item label="验证数据">
        <el-input
          v-model="form.data"
          @input="e => e.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
          placeholder="请输入"
          size="normal"></el-input>
      </el-form-item>
      <el-form-item label="基础信息users">
        <div class="name-phone">
          <!-- 第一重数组 -->
          <div class="item" v-for="(item, index) in form.users" :key="item.id">
            <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"
              style="margin: 0 10px"
              :prop="'users.' + index + '.mobile'"
              :rules="rules.mobile">
              <el-input v-model="item.mobile" size="small" placeholder="请输入手机号码" />
            </el-form-item>

            <!-- 第二重数组 -->
            <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>
      </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>
  export default {
    name: '',
    data() {
      return {
        form: {
          data: '',
          users: [
            {
              userName: '',
              mobile: null,
              otherInfn: null,
              list: [
                { attr1: null, attr2: null },
                { attr1: null, attr2: null }
              ]
            },
            {
              userName: '',
              mobile: null,
              otherInfn: null,
              list: [
                { attr1: null, attr2: null },
                { attr1: null, attr2: null }
              ]
            }
          ],
          otherInfn: null
        },
        rules: {
          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;
          }
        });
      },
      changeData(e) {
        console.log('-------- e --------', e);
      }
    }
  };
</script>

<style scoped>
  .el-input {
    max-width: 400px;
  }
</style>

五、总结：

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

猜你喜欢

转载自blog.csdn.net/snows_l/article/details/128994653
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022