html部分

<a-form ref="formRefSecurity" name="custom-validation" :model="dataSource">
      <a-table :columns="columns" :data-source="dataSource" bordered :pagination="false" >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'picture'">
            <a-upload v-if="!editableData[index].imageUrl" v-model:file-list="editableData[index].fileList"
              class="avatar-uploader" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture-card"
              @preview="(file) => handlePreview(file, index)" @change="(file) => handleImgChange(file, index)">
              <div v-if="editableData[index].fileList.length < 1">
                <plus-outlined />
                <div style="margin-top: 8px">Upload</div>
              </div>
            </a-upload>
            <a-image v-else :src="record.imageUrl" alt="" class="uploadImg" />
          </template>
            <template v-if="column.dataIndex === 'name'">
              <a-form-item v-if="isEdit" has-feedback :name="[index, 'name']" :rules="rules1.name" >
                <a-input  v-model:value="editableData[index].name" placeholder="请输入姓名" />
              </a-form-item>
              <span v-else>{{ record.name }}</span>
            </template>
            <template v-if="column.dataIndex === 'duties'">
              <a-form-item v-if="isEdit" has-feedback :name="[index, 'duties']" :rules="rules1.name" >
              <a-input v-model:value="editableData[index].duties" placeholder="请输入职务" />
              </a-form-item>
              <span v-else>{{ record.duties }}</span>
            </template>
            <template v-if="column.dataIndex === 'phone'">
              <a-form-item v-if="isEdit" has-feedback :name="[index, 'duties']" :rules="rules1.name" >
              <a-input v-model:value="editableData[index].phone" placeholder="请输入手机号" />
              </a-form-item>
              <span v-else>{{ record.phone }}</span>
            </template>
          <template v-if="column.dataIndex === 'operation'">
            <span>
              <a @click="handleDelete(record.key)">删除</a>
            </span>
          </template>
        </template>
      </a-table>
      </a-form>

• 注意a-form-item 里的name要作为唯一标识

js部分

import { cloneDeep } from 'lodash-es';
import { computed, defineComponent, reactive, ref } from 'vue';
import type { UnwrapRef } from 'vue';
import uploadImg from '@/views/pages/component/basicForm/uploadImg.vue'
import { PlusCircleTwoTone, LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { rules1 } from './validate'
// import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';

const formState = reactive<any>({
  name: '',
  fileList: [],
  duties: '',//职务
  phone: ''
})
const imageUrl = ref('');
const formRefSecurity = ref()
const loading = ref(false)
const isEdit = ref(false)
const isAdd = ref(false)
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    // width: '25%',
  },
  {
    title: '照片',
    dataIndex: 'picture',
    // width: '15%',
  },
  {
    title: '职务',
    dataIndex: 'duties',
    // width: '40%',
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    // width: '40%',
  },
  {
    title: '操作',
    dataIndex: 'operation',
  },
];

const dataSource: any = ref([]);
const editableData: any = ref([]);
const visible = ref(false)
// const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});

// const edit = (key: string) => {
//   editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
// };
// const save = (key: string) => {
//   Object.assign(dataSource.value.filter(item => key === item.key)[0], editableData[key]);
//   delete editableData[key];
// };
// const cancel = (key: string) => {
//   delete editableData[key];
// };

const beforeUpload = (file) => {
  console.log(file, '----------');

}

const customRequest = (file) => {
  console.log(file);
}
const handlePreview = async (file: any, index) => {
  // if (!file.url && !file.preview) {
  //   getBase64(file.originFileObj, (base64Url: string) => {
  //   imageUrl.value = base64Url;
  //   editableData.value[index].imageUrl = imageUrl.value
  //   loading.value = false;
  // });
  // }
  if (!file.url && !file.preview) {
    file.preview = (await getBase64(file.originFileObj)) as string;
  }
  imageUrl.value = file.url || file.preview;
  editableData.value[index].imageUrl = imageUrl.value
  // previewVisible.value = true;
  // previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
};
// const getBase64 = (img: Blob, callback: (base64Url: string) => void) => {
//   const reader = new FileReader();
//   reader.addEventListener('load', () => callback(reader.result as string));
//   reader.readAsDataURL(img);
// }
const getBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
const handleImgChange = (info, index) => {
  console.log(info, '===', index);
  // getBase64(info.file.originFileObj, (base64Url: string) => {
  //   imageUrl.value = base64Url;
  //   editableData.value[index].imageUrl = imageUrl.value
  //   loading.value = false;
  // });
}
const count = computed(() => dataSource.value.length + 1);
// modal弹窗确认
const handleOk = () => {
  dataSource.value.push({
    key: `${count.value}`,
    name: formState.name,
    fileList: formState.fileList,
    duties: formState.duties,
    phone: formState.phone,
    imageUrl: imageUrl.value
  });
  visible.value = false;
}

// 安防保存
const handleClick = () => {
  console.log(editableData.value, 'editableData');
  console.log(dataSource.value, 'dataSource');
  isEdit.value = false
  console.log(formRefSecurity.value);
  //校验
  formRefSecurity.value.validate()
}

const handleDelete = (key) => {
  dataSource.value.splice(key - 1, 1);
  editableData.value.splice(key - 1, 1);
}

const handleAdd = async() => {
await formRefSecurity.value.validate()
  editableData.value.push({
    key: `${count.value}`,
    name: formState.name,
    fileList: formState.fileList,
    duties: formState.duties,
    phone: formState.phone,
    imageUrl: ''
  })
  dataSource.value = [...editableData.value]
}