Vue Antd如何给表单form添加滚动条？
现在的问题是：多余的几个表单字段被遮住了，如何添加滚动条让所有表单显示出来？
界面显示如下：
如何实现给表单添加滚动条？
<template>
<div style="padding:20px;">
<div>
<a-form :form="form">
<a-row :gutter="24">
<a-col :span="8">
<a-form-item label="车牌号" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.licensePlateNumber" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="车架号" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.vin" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="SN" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.chip_sn" :readOnly="true"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="8">
<a-form-item label="车牌颜色" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.licPlateColor" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="总客数(人)" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.allCarryPassengers" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="最大总质量(kg)" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.maxTotalMass" :readOnly="true"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="8">
<a-form-item label="车籍地" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.vehNativePlace" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="所属单位名称" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.vehEntOwner" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="接入地" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.registeredRegion" :readOnly="true"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="8">
<a-form-item label="车主" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.userName" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="联系电话" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.phone" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="号牌种类" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.licensePlateType" :readOnly="true"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="8">
<a-form-item label="车辆类型" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.vehicleType" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="出厂日期" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.productionDate" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="注册日期" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.registrationDate" :readOnly="true"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="8">
<a-form-item label="所属类型" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.ownerType" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="排放等级" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.emissionStandard" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="所属区县" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.district" :readOnly="true"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="8">
<a-form-item label="发动机型号" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.engineModel" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="发动机号" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.engineNumber" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="车辆品牌" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.vehicleBrand" :readOnly="true"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="8">
<a-form-item label="车辆型号" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.vehicleModel" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="生产厂商" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.manufacturer" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="排量" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.displacement" :readOnly="true"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="8">
<a-form-item label="总质量(kg)" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.grossMass" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="尿素箱容积(L)" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.ureaTankVolume" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="车辆分类" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.classification" :readOnly="true"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="8">
<a-form-item label="额定功率(kw)" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.ratedPower" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="车辆用途" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.vehicleUsage" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="基准扭矩(Nm)" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.maxCriteria" :readOnly="true"/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="8">
<a-form-item label="参考扭矩(Nm)" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.engineReferenceTorque" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="燃料类型" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.fuelType" :readOnly="true"/>
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="费用类型" :colon=false :labelCol="{lg: {span: 9}, sm: {span: 5}}" :wrapperCol="{lg: {span: 15}, sm: {span: 17} }">
<a-input v-model="form.costType" :readOnly="true"/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</div>
</div>
</template>
- 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7641224
- 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：antd-vue vue3.0 form表单同时检测多个输入框
- 除此之外, 这篇博客: Antd vue form表单校验总结中的 表单校验方法 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
- 分类
- 组件实例
formRef的方法，详情请参考Form的方法API
import { FormInstance } from 'ant-design-vue' const formRef = ref<FormInstance>() formRef.value?.validate().then().catch()useForm的方法API，具体可参考useForm的参数说明
- 组件实例
- 方法介绍，详情可参考相关的API
validate、validateFields触发表单验证resetFields重置整个表单clearValidate移除表单校验效果
- 分类