el-form+el-table动态表单嵌套以及校验

<template>
  <!-- 考核通知 -->
  <div>
    <el-form :rules="rules" :model="form" ref="form" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="学校" prop="school">
            <el-input v-model="form.school" placeholder="请填写学校"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="班级" prop="classes">
            <el-input
              v-model="form.classes"
              placeholder="请填写班级"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          人员信息:
          <el-table :data="form.persons" style="width: 100%">
            <el-table-column label="姓名" align="center" width="180">
              <template slot-scope="{ row, $index }">
                <el-form-item
                  :prop="`persons.${$index}.name`"
                  :rules="rules.name"
                  label-width="0"
                >
                  <el-input v-model="row.name" :disabled="row.disabled">
                  </el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄" align="center">
              <template slot-scope="{ row, $index }">
                <el-form-item
                  :prop="`persons.${$index}.age`"
                  :rules="rules.age"
                  label-width="0"
                >
                  <el-input
                    v-model="row.age"
                    :disabled="row.disabled"
                    placeholder="请填写人员姓名"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" width="120px">
              <template slot="header">
                操作
                <el-button size="mini" @click="addTC">添加 </el-button>
              </template>
              <template slot-scope="{ row, $index }">
                <span
                  class="btn"
                  v-show="row.disabled"
                  @click="editTC($index, row)"
                  >编辑</span
                >
                <span
                  class="btn"
                  v-show="row.disabled"
                  @click="deleteTC($index)"
                  >删除</span
                >
                <span
                  class="btn"
                  v-show="!row.disabled"
                  @click="saveTC($index, row)"
                  >保存</span
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <el-button type="primary" @click="submit">确认</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        school: "",
        classes: "",
        persons: [
          {
            name: "砍伐者",
            age: 15,
            disabled: false,
          },
        ],
      },
      rules: {
        school: [
          {
            required: true,
            message: "请输入学校",
            trigger: "blur",
          },
        ],
        classes: [
          {
            required: true,
            message: "请输入班级",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        age: [
          {
            required: true,
            message: "请输入年龄",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    addTC() {
      this.form.persons = [
        ...this.form.persons,
        { name: "", age: "", disabled: false },
      ];
    },
    editTC(index, row) {
      row.disabled = false;
    },
    saveTC(index, row) {
      row.disabled = true;
    },
    deleteTC(index) {
      this.form.persons.splice(index, 1);
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert("校验成功");
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
  },
};
</script>
<style lang="scss" scoped>
.file-upload {
  text-align: left;
}
.btn {
  cursor: pointer;
}
</style>