參考：https://www.cnblogs.com/duanzhenzhen/p/13502278.html

我的情況：form表單中有迴圈的值，且其下級也是迴圈的值，想要對每個值進行校驗

效果：

html部分程式碼：

<el-form
          ref="form"
          label-width="140px"
          :model="form"
          :rules="rules"
          @submit.native.prevent
        >
          <div>
            <div
              v
 
-for="(parent, parentIndex) in form.parentList"
              :key="parentIndex + 1"
            >
              <p class="title">
                <span>父級物件{{ parentIndex + 1 }}</span>
                <el-link
                  v-if="form.parentList.length > 1"
                  type
 
="danger"
                  @click="deleteParent(parentIndex)"
                  >刪除父級物件</el-link
                >
              </p>
              <el-row :gutter="100">
                <el-col :span="12">
                  <el-form-item
                    label="名稱："
                    :rules
 
="rules.name"
                    :prop="`parentList.${parentIndex}.name`" // <===  關鍵
                  >
                    <el-input
                      v-model="parent.name"
                      clearable
                      size="large"
                      placeholder="請輸入"
                    ></el-input> </el-form-item
                ></el-col>
              </el-row>
              <el-row
                v-for="(child, childIndex) in parent.childList"
                :key="`children-${childIndex}`"
                :gutter="100"
              >
                <el-col :span="12"
                  ><el-form-item
                    :label="`子級物件${childIndex + 1}-名稱：`"
                    :rules="rules.name"
                    :prop="`parentList.${parentIndex}.childList.${childIndex}.name`" // <=== 關鍵
                  >  
                    <el-input
                      v-model="child.name"
                      clearable
                      size="large"
                      placeholder="請輸入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-link
                  v-if="parent.childList.length > 1"
                  type="danger"
                  @click="delChild(parentIndex, childIndex)"
                  >刪除子級物件</el-link
                >
              </el-row>
              <el-form-item>
                <el-link type="primary" @click="addChild(parentIndex)"
                  >新增子級物件</el-link
                >
              </el-form-item>
            </div>
            <el-divider></el-divider>
            <el-row :gutter="100">
              <el-col :span="12">
                <el-form-item>
                  <el-button type="primary" @click="addParent">
                    新增父級物件
                  </el-button>
                  <el-button type="success" @click.prevent="submit">
                    提交
                  </el-button></el-form-item
                ></el-col
              >
              <el-col :span="12"> <el-form-item> </el-form-item></el-col>
        </el-row>
    </div>
</el-form>

js部分程式碼：

data() {
    return {
      form: {
        parentList: [
          {
            name: '',
            childList: [{ name: '' }],
          },
        ],
      },
      rules: {
        name: [{ required: true, message: '請輸入', trigger: 'blur' }],
      },
      parentListIndex: '', // 父級物件序號
      childListIndex: '', // 子級物件序號
    };
  },
  methods: {
    // 新增父級物件
    addParent() {
      this.form.parentList.push({
        name: '',
        childList: [{ name: '' }],
      });
    },
    // 刪除父級物件
    deleteParent(index) {
      this.$confirm('此操作將刪除該父級物件, 是否繼續?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.form.parentList.splice(index, 1);
      });
    },
    // 新增子級物件
    addChild(index) {
      this.form.parentList[index].childList.push({
        name: '',
      });
    },
    // 刪除子級物件
    delChild(parentIndex, index) {
      this.$confirm('此操作將刪除該子級, 是否繼續?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.form.parentList[parentIndex].childList.splice(index, 1);
      });
    },
    // 提交
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log('提交');
        }
      });
    },
  },