<a-form :model="state.projectSchedulingList" ref="schedulingRef">
                        <div class="module-item" v-for="(item, index) in state.projectSchedulingList" :key="index">
                            <div class="form-content">
                                {{ state.projectSchedulingList }}
                                <a-row>
                                    <a-col :span="8">
                                        <a-form-item
                                            :labelCol="{ span: 6 }"
                                            :wrapperCol="{ span: 18 }"
                                            label="排序"
                                            :rules="[
                                                { required: true, message: '请输入序号', trigger: 'blur' },
                                                {
                                                    pattern: new RegExp(/^(0(\.\d{1,2})?|[1-9]\d*(\.\d{1,2})?)$/),
                                                    message: '仅支持小数点后两位的正数',
                                                    trigger: 'blur'
                                                },
                                                {
                                                    validator: (_, value) => validateUniqueStageNo(value, index),
                                                    trigger: 'blur'
                                                }
                                            ]"
                                            :name="[index, 'stageNo']"
                                        >
                                            <a-input-number
                                                style="width: 100%"
                                                v-model:value="state.projectSchedulingList[index].stageNo"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-item
                                            :labelCol="{ span: 6 }"
                                            :wrapperCol="{ span: 18 }"
                                            label="区域"
                                            :rules="[
                                                {
                                                    required: true,
                                                    message: '请选择区域',
                                                    trigger: 'blur'
                                                }
                                            ]"
                                            :name="[index, 'areaCode']"
                                        >
                                            <a-select
                                                :options="state.areaList"
                                                v-model:value="state.projectSchedulingList[index].areaCode"
                                                :filterOption="
                                                    (input, option) => {
                                                        return (
                                                            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                                                show-search
                                                allow-clear
                                                @change="areaChange(index)"
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="8">
                                        <a-form-item
                                            :labelCol="{ span: 6 }"
                                            :wrapperCol="{ span: 18 }"
                                            label="项目"
                                            :rules="[{ required: true, message: '请选择项目', trigger: 'blur' }]"
                                            :name="[index, 'projectId']"
                                        >
                                            <a-select
                                                allow-clear
                                                show-search
                                                :options="state.projectScheList"
                                                placeholder="请选择"
                                                v-model:value="state.projectSchedulingList[index].projectId"
                                                :field-names="{ label: 'projectName', value: 'projectId' }"
                                                :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.projectName
                                                                .toLowerCase()
                                                                .indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                                                @focus="getProjectByArea(index)"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </div>

                            <a class="del" @click="handlerDeleteSche(index)">删除</a>
                            <a class="add-btn" @click="handlerAddSche(index, '下方')">下方插入</a>
                        </div>
                    </a-form>

这个动态生成form表单得动作列表、可以动态添加删除和配置，需求是每行的项目和区域是级联关系，并且如果该项目已经被选中就不能重复选择，序号也不能重复，第一步先将联动实现并且过滤掉已经选择的项目。

    // 根据区域查项目
    function getProjectByArea(index) {
        if (!state.projectSchedulingList[index].areaCode) {
            state.projectScheList = []
            return
        }
        get(
            `xxx/project_by_area_code/${state.projectSchedulingList[index].areaCode}`
        ).then(data => {
            const selectedProjectIds = state.projectSchedulingList.map(item => item.projectId).filter(id => !!id) // 过滤 undefined/null
            state.projectScheList = data.data
            // 过滤掉已被选中的项目
            const filteredList = data.data.filter(project => {
                return !selectedProjectIds.includes(project.projectId)
            })
            state.projectScheList = filteredList
        })
    }

其次是排序需要验重，输入框的话只能使用表单校验的方式

  //     校验排序
    function validateUniqueStageNo(value, currentIndex) {
        return new Promise((resolve, reject) => {
            const duplicates = state.projectSchedulingList.filter((item, idx) => {
                return idx !== currentIndex && item.stageNo === value
            })

            if (duplicates.length > 0) {
                reject('序号重复')
            } else {
                resolve()
            }
        })
    }