vue3 setup antdv 可编辑表格嵌套表单字段进行自定义校验

一、使用a-form标签包裹a-table标签

1.model:绑定表单数据源且是一个对象

2.ref:获取表单实例

3.在a-form-item标签中要特别注意name的绑定

:name=['数据源',index,'字段名']

rules一定要绑定在此标签中，绑定在a-form中不生效

 <a-form ref="formTable" :model="form">
        <a-table
          :columns="columns"
          :data-source="form.dataSource"
          :pagination="false"
          :rowKey="(record = () => record.id)"
        >
          <template #bodyCell="{ column, text, record, index }">
            <template
              v-if="
                ['fieldCnName', 'fieldDescription', 'fieldEnName'].includes(
                  column.dataIndex
                )
              "
            >
              <div>
                <span v-if="editableData[record.id]">
                  <a-form-item
                    v-if="column.dataIndex === 'fieldCnName'"
                    :name="['dataSource', index, 'fieldCnName']"
                    :rules="rulesTable.fieldCnName"
                  >
                    <a-input
                      v-model:value="record.fieldCnName"
                      style="margin: -5px 0; width: 120px"
                    />
                  </a-form-item>
                  <a-form-item
                    v-if="column.dataIndex === 'fieldEnName'"
                    :name="['dataSource', index, 'fieldEnName']"
                    :rules="rulesTable.fieldEnName"
                  >
                    <a-input
                      v-model:value="record.fieldEnName"
                      style="margin: -5px 0; width: 120px"
                    />
                  </a-form-item>
                  <a-form-item v-if="column.dataIndex === 'fieldDescription'">
                    <a-input
                      v-model:value="record.fieldDescription"
                      style="margin: -5px 0; width: 320px"
                    />
                  </a-form-item>
                </span>
                <template v-else>
                  {{ text }}
                </template>
              </div>
            </template>
            <template v-if="column.dataIndex.includes('dataStandardCode')">
              <span v-if="editableData[record.id]">
                <a-form-item
                  :name="['dataSource', index, 'dataStandardCode']"
                  :rules="rulesTable.dataStandardCode"
                >
                  <a-select
                    v-model:value="record.dataStandardCode"
                    :options="optionTable"
                    show-search
                    placeholder="请选择标准映射"
                    style="width: 220px"
                    @popupScroll="handleScroll"
                    @change="handleChange"
                    @search="handleSearch"
                    :filterOption="false"
                  ></a-select>
                </a-form-item>
              </span>
              <template v-else>
                {{ record.dataStandardDetails }}
              </template>
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
              <div
                class="editable-row-operations"
                style="position: relative; top: -10px"
              >
                <span v-if="editableData[record.id]">
                  <a-typography-link @click="() => save(record)">
                    保存
                  </a-typography-link>
                  <a-popconfirm
                    title="是否取消?"
                    okText="确定"
                    cancelText="取消"
                    @confirm="cancel(record.id)"
                  >
                    <a>取消</a>
                  </a-popconfirm>
                </span>
                <span v-else>
                  <a @click="() => edit(record.id)">编辑</a>
                  <a-popconfirm
                    title="是否删除?"
                    @confirm="del(record.id)"
                    okText="确定"
                    cancelText="取消"
                  >
                    <a>删除</a>
                  </a-popconfirm>
                </span>
              </div>
            </template>
          </template>
        </a-table>
      </a-form>

二、异步校验 使用validate（）方法

// 确定
const handleRequired = async () => {
  
  await formTable.value.validate();

  //当校验通过后执行的逻辑...
};