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

Cupid510

已于 2022-10-27 10:04:48 修改

阅读量1k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-08-11 15:05:55 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44283432/article/details/126285560

版权

vue 专栏收录该内容

76 篇文章

订阅专栏

本文介绍了一个使用Vue实现的表格编辑案例，通过自定义表格单元格实现了动态表单字段，包括输入框、日期选择器和文件上传功能。文章展示了如何通过Vue的响应式特性管理表格数据，并提供了关键代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

    <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 
            @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  :name="['dataSource', index, 'itemName']"  :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']"
                        :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>

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: "",
    })
}