elementui-＞el-form中数组遍历循环做规则

 碰到了el-form关于对象中数组的一个坑，关于el-form中数组遍历循环做规则，如果后端传过来的是数组，可以把它加到一个空对象里。

第一种

<!-- :model绑定的一定是对象 -->
<el-form ref="envForm" :model="envVar">
    <!--envVariables是envVar里的数组 -->
    <div v-for="(item, index) in envVar.envVariables">
        <!--prop一定要写对-->
        <el-form-item :prop="`envVariables[${index}].key`" :rules="keyRules">
             <el-input v-model="item.key" placeholder="key"></el-input>
        </el-form-item>
        <el-form-item :prop="`envVariables[${index}].value`" :rules="valueRules">
             <el-input v-model="item.value" placeholder="value"></el-input>
        </el-form-item>
    </div>
<el-form>

<script>
export default {
    data() {
        return {
            envVar: {
                envVariables: [
                    {key: "hello", value: "nihao"},
                    {key: "hello", value: "nihao"},
                    {key: "hello", value: "nihao"},               
                ]
            },
            keyRules: [
                {
                    required: true, message: 'please input key', trigger: 'blur'
                },
                {min: 2, message: 'please enter at least 2 characters', trigger: 'blur'},
                { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号' }
            ],
            valueRules: {required: true, message: 'please input value', trigger: 'blur'},
        }
    }
}
</script>

第二种双层el-form嵌套

<el-form :model="help" :rules="helpRules" ref="helpRef">
  <el-form-item prop="str">
    <el-input v-model="help.str"></el-input>
  </el-form-item>
  <el-form-item prop="array">
    <!-- 这里的v-for循环的就是绑定的help下的array -->
    <div v-for="item, index in help.array" :key="index">
	<!-- el-form重点双重嵌套, model绑定的是item，也就是array下的每一项，规则是新的, 因为是多个el-form，所以这里的itemRef是数组，验证规则请看methods -->
	<el-form :model="item" :rules="itemRules" ref="itemRef">
	  <!-- prop绑定的是array下每一项的key值 -->
	  <el-form-item prop="go">
	    <el-input v-model="item.go"></el-input>
	  </el-form-item>
	  <el-form-item prop="to">
	    <el-input v-model="item.to"></el-input>
	  </el-form-item>
	</el-form>
    </div>
  </el-form-item>
</el-form>
<el-button @click="createButton">create</el-button>
<script>
export default {
  data() {
    return {
      help: {
        str: "world",
        array: [
	      {
	        go: 1,
	        to: biantai,
	      },
	      {
	        go: 1,
	        to: biantai,
          }
        ]
      },
      helpRules: {
        str: [
          { required: true, message: "please input str", trigger: "blur"},
        ],
        array: [
	      // 主要是为了array前面的*
          { required: true},
        ]
      },
      itemRules: {
        go: [
          { required: true, message: "please input go", trigger: "blur"},
        ],
        to: [
          { required: true, message: "please input to", trigger: "blur"},
        ] 
      }
    }
  },
  methods: {
    createButton() {
      let i = 0
      let arr = []
      // 先验证里面的form，也就是二级form
      for(i;i<this.help.array.length;i++) {
        // 重点因为itemRef是数组，所以itemRef[i]是为了验证array里的每一项
        this.$refs.itemRef[i].validate(valid => {
          if(!valid) {
            // 把所有的false都放到数组里去
  	        arr.push(valid)
          }
        })
      },
      // 再验证外面的form，一级form
      this.$refs.helpRef.validate(valid => {
        // 这样所有的form都验证完了
   	    if(valid) {
          // 如果二级form验证的valid都是true, 那么arr是空的
  	      if(arr.length == 0) {
            you can do something here
          }
        } else {
          // 验证一级表单的str, 有问题就返回false
  	      return false
        }
      })
    }
  }
}
</script>