el-form中关于添加el-table后动态添加el-input后怎么设置校验

个人笔记，欢迎指正

场景复现
如何实现动态表单满足rules规则


实现代码

<el-form ref="form" :model="form" :rules="rules" label-width="80px">
   <el-col :span="24">
     <el-form-item label="客户名称" prop="customerId">
       <el-select
         v-model="form.customerId"
         placeholder="请选择客户名称"
         style="width: 100%"
       >
         <el-option
           v-for="customer in customerList"
           :key="customer.customerId"
           :label="customer.customerName"
           :value="customer.customerId"
         />
       </el-select>
     </el-form-item>
   </el-col>
   <el-col :span="12">
     <el-form-item label="商机名称" prop="orderId">
       <el-select
         v-model="form.orderId"
         placeholder="请选择商机名称"
         style="width: 100%"
       >
         <el-option
           v-for="order in orderList"
           :key="order.orderId"
           :label="order.orderName"
           :value="order.orderId"
         />
       </el-select>
     </el-form-item>
   </el-col>
   <el-col :span="12">
     <el-form-item label="申请日期" prop="applyTime">
       <el-date-picker
         style="width: 100%"
         clearable
         v-model="form.applyTime"
         type="date"
         value-format="yyyy-MM-dd"
         placeholder="请选择申请日期"
       />
     </el-form-item>
   </el-col>
   
   <!-- 动态表单处 -->
   <el-col :span="24">
     <el-form-item label="费用明细" prop="details" class="details">
       <el-table :data="detailList" style="width: 100%">
         <el-table-column label="报销项目" prop="project" width="280">
           <template slot-scope="scope">
             <el-input
               v-model="scope.row.detailsName"
               placeholder="请输入报销项目"
             />
           </template>
         </el-table-column>
         <el-table-column label="摘要" prop="detailsSummary" width="280">
           <template slot-scope="scope">
             <el-input
               v-model="scope.row.detailsSummary"
               placeholder="请输入摘要"
             />
           </template>
         </el-table-column>
         <el-table-column label="金额" prop="detailsAmount" width="280">
           <template slot-scope="scope">
             <el-input
               v-model="scope.row.detailsAmount"
               type="number"
               placeholder="请输入金额"
             />
           </template>
         </el-table-column>
         <el-table-column
           label="操作"
           align="center"
           class-name="small-padding fixed-width"
         >
           <template slot-scope="scope">
             <el-button
               v-if="scope.$index === detailList.length - 1"
               size="mini"
               type="text"
               icon="el-icon-plus"
               @click="addExpenses"
               >新增</el-button
             >
             <el-button
               v-else
               size="mini"
               type="text"
               icon="el-icon-delete"
               @click="delExpenses(scope.$index)"
               >删除</el-button
             >
           </template>
         </el-table-column>
       </el-table>
     </el-form-item>
   </el-col>
   <!-- 动态表单处 -->

   <el-col :span="24">
     <el-form-item label="合计金额" prop="amount">
       <el-input
         v-model="form.amount"
         placeholder="请输入合计金额"
         readonly
       />
     </el-form-item>
   </el-col>
   <el-col :span="12">
     <el-form-item label="原借款" prop="loan">
       <el-input v-model="form.loan" placeholder="请输入原借款" />
     </el-form-item>
   </el-col>
   <el-col :span="12">
     <el-form-item label="应退款" prop="refund">
       <el-input v-model="form.refund" placeholder="请输入应退款" />
     </el-form-item>
   </el-col>
   <el-col :span="24">
     <el-form-item label="备注" prop="remark">
       <el-input
         v-model="form.remark"
         type="textarea"
         placeholder="请输入内容"
       />
     </el-form-item>
   </el-col>
   <el-col :span="24">
     <el-form-item>
       <el-button type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="cancel">取 消</el-button>
     </el-form-item>
   </el-col>
 </el-form>

<script>
export default {
  name: "Apply",
  data() {
    return {
      detailList: [
        { detailsName: "", detailsSummary: "", detailsAmount: null },
      ],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        customerId: [
          { required: true, message: "客户名称不能为空", trigger: "change" },
        ],
        orderId: [
          { required: true, message: "商机名称不能为空", trigger: "change" },
        ],
        applyTime: [
          { required: true, message: "申请时间不能为空", trigger: "change" },
        ],
        amount: [
          { required: true, message: "费用金额不能为空", trigger: "bulr" },
        ],
        details: {
          required: true,
          validator: this.validateDetails,
          trigger: 'blur',
        },
      },
    };
  },
  methods: {
    validateDetails(rule, value, callback) {
      const isValid = this.detailList.every(item => {
      	// 检查每一项必填
        return item.detailsName && item.detailsSummary && item.detailsAmount; 
      });
      if (!isValid) {
        callback(new Error('每一项都必须填写完整'));
      } else {
        callback();
      }
    },
    addExpenses() {
      this.detailList.push({
        detailsName: "",
        detailsSummary: "",
        detailsAmount: "",
      });
    },
    delExpenses(index) {
      this.detailList.splice(index, 1);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.applyId != null) {
            updateApply(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addApply(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
  },
};
</script>