el-form表单校验 动态添加el-form-item rules用法，嵌套表单校验

el-form表单校验 动态添加el-form-item rules用法，嵌套表单校验

el-form中rules绑定的规则，只争对model绑定对象中的一级元素（如homeworkName）起作用，且定义rules规则的时候，名称要与绑定的对象的属性（prop中绑定的）名称一致

对于个别el-form-item中的元素含有多层且套的情况，可以给el-form-item中绑定属于自己的规则，需要注意给prop绑定时的名称要保持一致（一级属性+索引+二级属性名称 :prop="‘list.’+index+‘.questionContext’）

完整代码如下

<template>
    <el-form ref="query" :model="query" :rules="rules">
      <el-form-item label="作业名称" prop="homeworkName">
        <el-input type="textarea" autosize v-model="query.homeworkName" placeholder="请输入...">
        </el-input>
      </el-form-item>
      <div style="padding:0px 40px 20px">
        <div v-for="(item,index) in query.list" :key="index">
          <!-- 题目描述 -->
          <el-form-item :label="index+1 +'.题目内容'" :rules="itemRules" :prop="'list.'+index+'.questionContext'">
            <el-input type="textarea" autosize v-model="item.questionContext" placeholder="请输入...">
            </el-input>
          </el-form-item>
        </div>
        <el-button @click="continueAdd">继续添加</el-button>
      </div>
    </el-form>
</template>

<script>
  export default {
    data() {
      return {
        query: {
          homeworkName: '',
          list: [{
            questionContext: '',
          }]
        },
        rules: {
          homeworkName: [
            { required: true, message: '请输入作业名称', trigger: 'blur' },
            { min: 1, max: 500, message: '长度在 1 到 500 个字符', trigger: 'blur' }
          ]
        },
        itemRules: [
          { required: true, message: '请输入题目内容', trigger: 'blur' },
          { min: 1, max: 500, message: '长度在 1 到 500 个字符', trigger: 'blur' }
        ],
      }
    },
    methods: {
      continueAdd() {
        this.query.list.push({
          questionContext: '',
        })
      }
    }
  }
</script>

效果图如下，其中题目123均为动态添加，校验任然有效：