antd vue table表格内添加表单验证方法（可能table还存在循环判断）

业务需求；需要table内的某项或者某些项能编辑；并且需要校验规则

方式1.将form-model放置在 table 内

<!-- html -->
<advance-table
    bordered
    :scroll="{ x:'100%',y: 300 }"
    :columns="columns_white_list_edit"
    :data-source="siteList"
    :rowKey="(row,index) => row.siteId"
    :rowSelection="{selectedRowKeys:selectedRowKeysSite,onChange:onChangeSite,columnWidth:50}"
    :pagination="paginationSite"
    @change="handleTableChangeSite"
    :showToolbar="false"
  >
    <a-form-model :model="record" :ref="`formData_${index}`" slot="endTime" class="handle-btn-box" slot-scope="{text, record, index}">
      <a-form-model-item prop="endTime" :rules="{ required: true, message: '请选择' }" >
        <a-date-picker v-model="record.endTime" @change="changeItemTime(record.siteId,index)" showTime format="YYYY-MM-DD hh:mm:ss" valueFormat="YYYY-MM-DD hh:mm:ss" :getCalendarContainer="() => win.document.body" />
      </a-form-model-item>
    </a-form-model>
  </advance-table>

<!-- js -->
for (const key in _this.$refs) {
  if (key === 'con') break
  _this.$refs[key].validate(async valid => {
    if (!valid) return false
  })
}

方式2.将table放置在form-model 内

<!-- html -->
<a-form-model :model="reqData" ref="formData">
  <advance-table
    bordered
    :scroll="{ x:'100%',y: 300 }"
    :columns="columns_white_list_edit"
    :data-source="reqData.siteList"
    :rowKey="(row,index) => row.siteId"
    :rowSelection="{selectedRowKeys:selectedRowKeysSite,onChange:onChangeSite,columnWidth:50}"
    :pagination="paginationSite"
    @change="handleTableChangeSite"
    :showToolbar="false"
  >
    <template slot="endTime" slot-scope="{text, record, index}">
      <a-form-model-item :prop="`siteList.${index}.endTime`" :rules="{ required: true, message: '请选择' }" >
        <a-date-picker v-model="record.endTime" showTime format="YYYY-MM-DD hh:mm:ss" valueFormat="YYYY-MM-DD hh:mm:ss" :getCalendarContainer="() => win.document.body" />
      </a-form-model-item>
    </template>
  </advance-table>
</a-form-model>

<!-- js -->
_this.$refs.formData.validate(async valid => {
          if (!valid) return
})

重点是 :prop="siteList.${index}.endTime"

方式3: 2的进化 -> table在form-model内；并且table是数组循环的内容

<a-form-model :model="value" ref="formData" :rules="rules" labelAlign="left">
      <a-card title="背景/方案说明" :bordered="false">
        <a-row :gutter="[24]">
          <a-col :span="6">
            <a-form-model-item label="签约主体" prop="companyId">
              <BlSelectCommon v-model="value.companyId" :apiFn="blCommonDropdownCompany" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-card>
      <DetailDivider />
      <a-card title="机台明细" :bordered="false">
        <a-button slot="extra" type="primary" :disabled="value.contactList.length > 4" @click="handleArr('add')">新增</a-button>
        <a-row :gutter="[24]" v-for="(item,index) in value.contactList" :key="index" class="m-b-20">
            <a-col :span="6">
              <a-form-model-item label="场所名称">
                <BlSelectCommon v-model="item.companyId" :apiFn="blCommonDropdownCompany" />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="操作">
                <a-button type="primary" @click="handleAddOrReduce('contactList','add',index)">新增一条点位</a-button>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
            <!-- 将table放在form-model中；因为table内可能存在很多必填项  -->
            <!-- model值应为一个对象；ref动态拼接index  -->
              <a-form-model :model="item" :ref="`table_${index}`">
              <advance-table
                class="m-t-10"
                bordered
                :scroll="{ x:'100%',y: 400 }"
                :columns="columns_project_apply_plan_explain_tab"
                :data-source="item.list"
                :rowKey="(row,index) => index"
                :pagination="false"
                :showToolbar="false"
              >
                <template slot="number" slot-scope="{text, record, index}">
                  <span >{{index + 1}}</span>
                </template>
                <template slot="companyName" slot-scope="{text, record,index}">
                <!-- prop使用动态方式；注意此处第一个key应为table实际渲染的key；即`:data-source="item.list"`的list  -->
                  <a-form-model-item :prop="`list.${index}.companyName`" :rules="{ required: true, message: '请输入' }">
                    <a-input v-model="record.companyName" :disabled="disabled" placeholder="场所名＋投放场地＋摆放位置"></a-input>
                  </a-form-model-item>
                </template>
                <div slot="handle" class="handle-btn-box" slot-scope="{text, record, innerIndex}">
                  <a-icon type="minus-circle" style="color: red;font-size: 20px;" class="m-l-10" @click="handleAddOrReduce('contactList','del',index,innerIndex)" />
                </div>
              </advance-table>
            </a-form-model>
            </a-col>
        </a-row>
      </a-card>
      <DetailDivider />
    </a-form-model>

<!-- js - rules -->

rules: {
        companyId: [{ required: true, message: '请输入' }], // 非table内的prop
        companyName: [{ required: true, message: '请输入' }], // table内的prop
        ...
    }

<!-- js - check 校验函数 -->
async checkItem(index) {
      try {
        return await this.$refs[`table_${index}`][0].validate()
      } catch (error) {
        return false
      }
    },
    // 直接调用 check 函数即可
    async check() {
      const result_arr = []
      this.value.contactList.forEach((el, index) => {
        result_arr.push(
          this.checkItem(index)
        )
      })
      try {
        // 单独添加一条其他form-model的验证
        const formData = this.$refs.formData.validate().then(res => res).catch(err => err)
        const all = await Promise.all(result_arr);
        if ([...all, formData].includes(false)) {
          return false
        }
        return true
      } catch (error) {
        return false
      }
    }