element-ui el-form 动态数据循环表单验证的方法_element-ui中的form循环进行动态校验

作者：小小林熬夜学编程 | 2024-02-19 16:36:33

踩

element-ui中的form循环进行动态校验


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.min.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/index.min.js"></script>
  </head>
  <body>
    <div id="app" style="width: 800px; height: 400px">
      <!-- 整个表单 -->
      <el-form :model="formInfo" size="mini" :rules="rules" ref="formInfo" inline>
        <!-- 固定值  公共部分-->
        <el-form-item label="名称" prop="name">
          <el-input v-model="formInfo.name" size="mini" />
        </el-form-item>
 
        <!-- 循环值  prop为'userList.'+index+'.name'  .每一个循环中的<el-form-item>都需要加：rules-->
        <div v-for="(item, index) in formInfo.list" :key="index" class="inline">
          <el-form-item label="账号：" :prop="'list.'+ index +'.username'" :rules="rules.username">
            <el-input v-model="item.username" size="mini" />
          </el-form-item>
          <el-form-item label="密码：" :prop="'list.'+ index +'.password'" :rules="rules.password">
            <el-input v-model="item.password" type="password" />
          </el-form-item>
          <el-form-item label="手机号：" :prop="'list.'+ index +'.phone'" :rules="rules.phone">
            <el-input v-model="item.phone" size="mini" />
          </el-form-item>
        </div>
      </el-form>
 
      <el-button type="primary" @click="add">添加</el-button>
 
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
    <script>
      const lx = new Vue({
        el: '#app',
        data() {
          return {
            rules: {
              name: [
                {
                  required: true,
                  message: '请输入名称',
                  trigger: 'blur',
                },
              ],
              phone: [
                {
                  required: true,
                  message: '请输入账号手机号',
                  trigger: 'blur',
                },
              ],
              username: [
                {
                  required: true,
                  message: '请输入账号名称',
                  trigger: 'blur',
                },
              ],
              password: [
                {
                  required: true,
                  message: '请输入密码',
                  trigger: 'blur',
                },
              ],
            }, // 添加校验
            formInfo: {
              name: '',
              list: [
                {
                  phone: '',
                  username: '',
                  password: '',
                },
              ],
            },
          }
        },
        watch: {},
        computed: {},
        methods: {
          // 新增
          add() {
            this.formInfo.list.push({ phone: '', username: '', password: '' })
          },
 
          // 提交
          submit() {
            let isValid = false
            this.$refs.formInfo.validate((valid) => {
              if (valid) isValid = true
            })
            if (!isValid) return
          },
        },
        created() {},
      })
    </script>
 
    <style>
      .inline {
        display: flex;
      }
    </style>
  </body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/115794