vue3.2 table遍历form表单数据校验

    <a-button type="primary" @click="handleAdd" v-if="!disable">新增</a-button>
    <br>
    <br>
    <a-form ref="formRefProtocol" :model="protocolFormState">
        <a-table :columns="columns" :data-source="protocolFormState.dataSource" bordered :pagination="pagination"
            @change="handleTableChange" :rowKey="(record: any) => { return record.id }">
            <template v-slot:bodyCell="{ column, record, index, text }">
                <template v-if="column.dataIndex == 'itemName'">
                    <span v-if="disable">{{ text }}</span>
                    <a-form-item v-else :ref="index" :name="['dataSource', index, 'itemName']" :model="record" :rules="{
                        required: true,
                        message: '请输入协议名称',
                        trigger: 'change',
                    }">
                        <a-input v-model:value="record.itemName" placeholder="请输入协议名称" />
                    </a-form-item>
                </template>
                <template v-if="column.dataIndex == 'itemType'">
                    <span v-if="disable">{{ text }}</span>
                    <a-form-item v-else :name="['dataSource', index, 'itemType']" :model="record"
                        :rules="[{ required: true, message: '请选择签约时间', trigger: 'change' }]">
                        <a-date-picker v-model:value="record.itemType" placeholder="请选择签约时间" />
                    </a-form-item>

                </template>
                <template v-if="column.dataIndex == 'value2'">
                    <div v-if="!record.value2">
                        <a-upload name="file" :limit="1" v-model:file-list="fileList"
                            :before-upload="(file: any) => beforeUpload(file, record)" :showUploadList="false">
                            <a-button>
                                <upload-outlined></upload-outlined>
                                上传
                            </a-button>
                        </a-upload>
                    </div>
                    <div v-else>
                        <a :href="record.fileLike" target="_blank">预览</a>
                        <a-divider type="vertical" />
                        <a @click="handledownloadFile(record)">下载</a>
                        <a-divider type="vertical" />
                        <a-popconfirm title="确认删除吗?" @confirm="handleRemove(record)" v-if="!disable">
                            <a>删除</a>
                        </a-popconfirm>
                    </div>
                </template>
            </template>
        </a-table>
    </a-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

const protocolFormState = reactive<{ dataSource: any }>({
    dataSource: [{ itemName: '1111', value2: '333' }, { itemName: '1111' }],
});
const handleAdd = () => {
    let key = Math.ceil(Math.random() * 10).toString()
    protocolFormState.dataSource.push({
        key,
        itemName: "",
        itemType: "",
    })
}
1
2
3
4
5
6
7
8
9
10
11