一
<a-form
ref="form"
:model="form"
:rules="rules"
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
>
<!-- <a-form-item label='创建人:' name='createdBy'>-->
<!-- <a-input-number v-model:value='form.createdBy' placeholder='请输入创建人' allow-clear autocomplete='off' style="width: 100%" />-->
<!-- </a-form-item>-->
<a-form-item label="项目编号:" name="projectCode">
<a-input v-model:value="form.projectCode" placeholder="请输入项目编号" style="width: 50%" allow-clear autocomplete="off" />
</a-form-item>
<a-form-item label="项目名称:" name="projectName">
<a-input v-model:value="form.projectName" placeholder="请输入项目名称" style="width: 50%" allow-clear autocomplete="off" />
</a-form-item>
<a-form-item label="项目承担单位:" name="company">
<a-input v-model:value="form.company" placeholder="请输入项目承担单位" style="width: 50%" allow-clear autocomplete="off" />
</a-form-item>
<a-form-item label="项目目的和意义:" name="purpose">
<a-textarea v-model:value="form.purpose" placeholder="请输入项目目的和意义" style="width: 50%" allow-clear autocomplete="off" />
</a-form-item>
<a-form-item label="技术水平:" name="level">
<a-select
ref="select"
v-model:value="form.level"
style="width: 40%"
placeholder="请选择技术水平"
@focus="focus"
@change="handleChange"
>
<a-select-option value="国际先进">国际先进</a-select-option>
<a-select-option value="国际领先">国际领先</a-select-option>
<a-select-option value="国内先进">国内先进</a-select-option>
<a-select-option value="国内领先">国内领先</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="项目类型:" name="projectType">
<a-select
ref="select"
v-model:value="form.projectType"
placeholder="请选择项目类型"
style="width: 40%"
@focus="focus"
@change="handleChange"
>
<a-select-option value="产学研合作">产学研合作</a-select-option>
<a-select-option value="自主研发">自主研发</a-select-option>
<a-select-option value="其他">其他</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="项目主要内容:" name="content">
<a-textarea v-model:value="form.content" placeholder="请输入项目主要内容" style="width: 50%" allow-clear autocomplete="off" />
</a-form-item>
<a-form-item label="项目前期准备工作、调研计划:" name="plan">
<a-textarea
v-model:value="form.plan"
placeholder="请输入项目前期准备工作、调研计划"
style="width: 50%"
allow-clear
autocomplete="off"
/>
</a-form-item>
<a-form-item label="项目预计科技投入总额:" name="investment">
<a-input-number
v-model:value="form.investment"
placeholder="请输入项目预计科技投入总额"
style="width: 50%"
allow-clear
autocomplete="off"
addon-before="RMB"
addon-after="万元"
/>
</a-form-item>
<a-form-item label="前期准备工作进展、项目调研进展:" name="progress">
<a-textarea
v-model:value="form.progress"
placeholder="请输入前期准备工作进展、项目调研进展"
style="width: 50%"
allow-clear
autocomplete="off"
/>
</a-form-item>
<a-form-item label="已累计投入总额:" name="spent">
<a-input-number
v-model:value="form.spent"
placeholder="请输入已累计投入总额"
style="width: 50%"
allow-clear
autocomplete="off"
addon-before="RMB"
addon-after="万元"
/>
</a-form-item>
<a-form-item label="项目调研报告（或总结）:" name="report">
<a-upload
name="file"
ref="uploadRef"
class="upload-list"
v-model:file-list="fileList"
:multiple="false"
:action="FileUploadUrl"
:headers="headers"
:before-upload="beforeUpload"
:custom-request="customRequest"
@change="handleChange"
@remove="handleRemove"
>
<a-button v-if="fileList.length < 1">
<template #icon>
<CloudUploadOutlined />
</template>
<span>选择文件</span>
</a-button>
</a-upload>
</a-form-item>
</a-form>二
data() {
return {
fileList: [],
// 表单数据
form: Object.assign({}, this.data),
// 表单验证规则
rules: {
createdBy: [{ required: true, message: '请输入创建人', type: 'number', trigger: 'blur' }],
projectName: [{ required: true, message: '请输入项目名称', type: 'string', trigger: 'blur' }],
company: [{ required: true, message: '请输入项目承担单位', type: 'string', trigger: 'blur' }],
purpose: [{ required: true, message: '请输入项目目的和意义', type: 'string', trigger: 'blur' }],
level: [{ required: true, message: '请输入技术水平', type: 'string', trigger: 'blur' }],
projectType: [{ required: true, message: '请输入项目类型', type: 'string', trigger: 'blur' }],
content: [{ required: true, message: '请输入项目主要内容', type: 'string', trigger: 'blur' }],
plan: [{ required: true, message: '请输入项目前期准备工作、调研计划', type: 'string', trigger: 'blur' }],
investment: [{ required: true, message: '请输入项目预计科技投入总额', type: 'number', trigger: 'blur' }],
postTime: [{ required: true, message: '请输入', type: 'string', trigger: 'blur' }],
status: [{ required: true, message: '请输入', type: 'string', trigger: 'blur' }],
progress: [{ required: true, message: '请输入前期准备工作进展、项目调研进展', type: 'string', trigger: 'blur' }],
report: [{ required: true, message: '请输入项目调研报告（或总结）', type: 'change', trigger: 'blur' }],
projectCode: [{ required: true, message: '请输入项目编号', type: 'string', trigger: 'blur' }],
spent: [{ required: true, message: '请输入已累计投入总额', type: 'number', trigger: 'blur' }]
},
// 提交状态
loading: false,
headers: {
Authorization: getToken()
},
// 是否是修改
isUpdate: false
};
},文章来源地址https://www.toymoban.com/news/detail-794084.html
文章来源：https://www.toymoban.com/news/detail-794084.html
到了这里，关于Vue3+antDesignVue实现表单校验的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
