vue3实现model框内表单实现动态添加修改，动作列表效果

模板部分

<a-modal :visible="stateLi.visible" title="新增任务" destroyOnClose width="50%" :ok-button-props="{ disabled: btnLoading }"
  @cancel="stateLi.visible = false" @ok="handlerSubmit">
  <a-form ref="formRef" :model="stateLi.taskFromList">
    <div v-for="(item, index) in stateLi.taskFromList" :key="index" class="form-item">
      <div class="form-content">
        <a-row>
          <a-col :span="24">
            <a-form-item label="任务名称" :name="[index, 'taskName']" :rules="{ required: true, message: '请输入任务名称!' }">
              <a-input v-model:value="stateLi.taskFromList[index].taskName" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="里程碑" :name="[index, 'milepostId']" :rules="{ required: true, message: '请选择里程碑!' }">
              <a-select v-model:value="stateLi.taskFromList[index].milepostId" showSearch
                :options="stateLi.milepostList" :field-names="{ label: 'milepostName', value: 'milepostId' }"
                @focus="getMilepostList" @change="handlerMilepostIdChange(index)" :filter-option="(input, option) => {
                  return option.milepostName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
                " />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="父级任务">
              <a-tree-select v-model:value="stateLi.taskFromList[index].parentId" allowClear showSearch
                :tree-data="stateLi.parentListMap[index]" :field-names="{ label: 'taskName', value: 'taskId' }"
                :filter-option="(input, option) => {
                  return option.taskName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
                " />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="任务优先级" :name="[index, 'priority']" :rules="{ required: true, message: '请选择任务优先级!' }">
              <a-select v-model:value="stateLi.taskFromList[index].priority" showSearch :options="[
              { label: '最高', value: 'HIGHEST' },
              { label: '高', value: 'HIGH' },
              { label: '中', value: 'MEDIUM' },
              { label: '低', value: 'LOW' },
              { label: '最低', value: 'LOWEST' }
            ]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="依赖任务">
              <a-select v-model:value="stateLi.taskFromList[index].taskDependency" allowClear showSearch
                :options="stateLi.taskList" :field-names="{ label: 'taskName', value: 'taskId' }" :filter-option="(input, option) => {
                  return option.taskName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
                " />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="预计投入工时" :name="[index, 'workingHours']"
              :rules="{ required: true, message: '请输入预计投入工时!' }">
              <a-input v-model:value="stateLi.taskFromList[index].workingHours" type="number" suffix="小时" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="任务负责人" :name="[index, 'taskOwner']" :rules="{ required: true, message: '请选择任务负责人!' }">
              <a-select v-model:value="stateLi.taskFromList[index].taskOwner" showSearch
                :options="stateLi.taskParticipantList" :field-names="{ label: 'name', value: 'name' }" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="任务类型" :name="[index, 'taskType']" :rules="{ required: true, message: '请选择任任务类型!' }">
              <a-select v-model:value="stateLi.taskFromList[index].taskType" showSearch :options="[
              { label: '主任务', value: '主任务' },
              { label: '辅助任务', value: '辅助任务' },
              { label: '其他任务', value: '其他任务' }
            ]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="任务开始时间" :name="[index, 'startTime']" :rules="{ required: true, message: '请选择任务开始时间!' }">
              <a-date-picker v-model:value="stateLi.taskFromList[index].startTime" valueFormat="YYYY-MM-DD" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="任务结束时间" :name="[index, 'endTime']" :rules="{ required: true, message: '请选择任务结束时间!' }">
              <a-date-picker v-model:value="stateLi.taskFromList[index].endTime" valueFormat="YYYY-MM-DD" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="审核员" :name="[index, 'assessor']" :rules="{ required: true, message: '请选择审核员!' }">
              <a-select v-model:value="stateLi.taskFromList[index].assessor" showSearch
                :options="stateLi.taskParticipantList" :field-names="{ label: 'name', value: 'id' }" :filter-option="(input, option) => {
                  return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
                " />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="是否必须提交输出物" :name="[index, 'output']"
              :rules="{ required: true, message: '请选择是否必须提交输出物!' }">
              <a-select v-model:value="stateLi.taskFromList[index].output" showSearch :options="[
              { label: '是', value: '是' },
              { label: '否', value: '否' }
            ]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="任务参与人" :name="[index, 'taskParticipantList']"
              :rules="{ required: true, message: '请选择任务参与人!' }">
              <a-select v-model:value="stateLi.taskFromList[index].taskParticipantList" showSearch mode="multiple"
                :options="stateLi.taskParticipantList" :field-names="{ label: 'name', value: 'name' }" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="备注">
              <a-textarea v-model:value="stateLi.taskFromList[index].description" />
            </a-form-item>
          </a-col>
        </a-row>
      </div>
      <a class="del" @click="handlerDeleteFormItem(index)">删除</a>
    </div>
  </a-form>
  <a-button type="primary" ghost class="add-btn" @click="handlerAddFormItem">
    <plus-outlined />
    添加
  </a-button>
</a-modal>

数据部分

const stateLi = reactive({
visible: false,
  taskFromList: [],
})
//动态添加的对象
const taskFromListItem = {
  taskName: undefined,
  milepostId: undefined,
  taskDependency: undefined,
  priority: undefined,
  taskOwner: undefined,
  taskType: undefined,
  assessor: undefined,
  startTime: undefined,
  endTime: undefined,
  taskParticipantList: [],
  description: undefined,
  workingHours: undefined,
  output: undefined,
  parentId: undefined
}

方法

//添加·
function handlerAddFormItem() {
  stateLi.taskFromList.push({ ...taskFromListItem })
}
//删除
function handlerDeleteFormItem(index) {
  stateLi.taskFromList.splice(index, 1)
  const data = {}
  for (let k in stateLi.parentListMap) {
    if (k < index) {
      data[k] = stateLi.parentListMap[k]
    } else if (k > index) {
      data[k - 1] = stateLi.parentListMap[k]
    }
  }
  stateLi.parentListMap = data
}
//校验并提交
function handlerSubmit() {
  formRef.value.validate().then(data => {
    btnLoading.value = true
    post(`xxxxxxx`, {
      taskFromList: Object.values(stateLi.taskFromList)
    })
      .then(({ message: errMsg, code }) => {
        if (code !== 200) {
          message.error(errMsg)
        }
        stateLi.visible = false
        getTableData()
      })
      .finally(() => {
        btnLoading.value = false
      })
  })
}