Ant Design of Vue中a-form-model多行表单对齐和验证
Posted 尔嵘
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ant Design of Vue中a-form-model多行表单对齐和验证相关的知识，希望对你有一定的参考价值。
表单是前端人员不得不面对的一个组件，如何画的对齐好看，验证成功呢？
1.代码：
（1）布局: html+css，当然肯定使用ant的组件
注意：单位我们放在suffix里面，如suffix="㎡"；尽量不要给表单设置固定死的宽度，比如a-input、a-select,当我们设置的labelCol、wrapperCol足够大的时候，表单会自动填充区域；labelAlign="right"是设置label全部右对齐
<a-card :bordered="false" :body-style=" padding: '0px' ">
<a-form-model
:model="dataForm"
ref="dataForm"
@submit.native.prevent
@keyup.enter.native="querySearch()"
style="height: 1000px"
labelAlign="right"
:labelCol=" span: 6 "
:wrapperCol=" span: 18 "
:rules="rules1"
>
<a-row>
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
<div
style="display: flex;justify-content: flex-start;vertical-align: middle;align-items: center"
>
<h3 style="color: #16F5E6;">电站数据</h3>
</div>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item prop="selectArea" label="市/地区" style="color: #fff">
<a-select
v-model="dataForm.selectArea"
:default-value="provinceData[0]"
style="width: 100%"
@change="handleProvinceChange"
>
<a-select-option v-for="(province,index) in provinceData" :key="index"> province </a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item prop="installedCapacity" label="装机容量">
<a-input v-model="dataForm.installedCapacity" placeholder="请输入" suffix="MW"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item prop="mwzj" label="每瓦造价">
<a-input v-model="dataForm.mwzj" placeholder="请输入" suffix="元/W"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item prop="zymj" label="租用面积">
<a-input v-model="dataForm.zymj" placeholder="请输入" suffix="㎡"></a-input>
</a-form-model-item>
</a-col>
</a-row>
<!-- 第二行 -->
<a-row>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item prop="yearSunHour" label="年日照小时">
<a-input v-model="dataForm.yearSunHour" placeholder="请输入" suffix="h"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item prop="htnx" label="合同年限">
<a-input v-model="dataForm.htnx" placeholder="请输入" suffix="年"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item prop="rent" label="租金">
<a-input v-model="dataForm.rent" placeholder="租金" suffix="元/㎡"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item prop="hwnf" label="换瓦年份">
<a-input v-model="dataForm.hwnf" placeholder="换瓦年份" suffix="年"></a-input>
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<!-- 第三行 -->
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item prop="highLowPressure" label="高低压">
<a-select default-value v-model="dataForm.highLowPressure" style="width: 100%">
<a-select-option
v-for="item in highLowPressureData"
:key="item.value"
> item.label </a-select-option>
</a-select>
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
<div
style="display: flex;justify-content: space-between;vertical-align: middle;align-items: center"
>
<div
style="display: flex;justify-content: flex-start;vertical-align: middle;align-items: center"
>
<h3 style="color: #16F5E6;">价格数据</h3>
</div>
</div>
</a-col>
<!-- 第四行 -->
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="自发自用比列" prop="zfzybl">
<a-input v-model="dataForm.zfzybl" placeholder="请输入" suffix="%"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="综合电价" prop="zhdj">
<a-input v-model="dataForm.zhdj" placeholder="请输入" suffix="元"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="电价折扣率" prop="djzkl">
<a-input v-model="dataForm.djzkl" placeholder="电价折扣率" suffix="%"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6"></a-col>
</a-row>
<!-- 第五行 -->
<a-row>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="国家度电补贴" prop="gjddbt">
<a-input v-model="dataForm.gjddbt" placeholder="请输入" suffix="元/kW·h"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="国家补贴年限" prop="gjbtnd">
<a-input v-model="dataForm.gjbtnd" placeholder="请输入" suffix="年"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="12"></a-col>
</a-row>
<!-- 第六行-->
<a-row>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="省度电补贴" prop="sddbt">
<a-input v-model="dataForm.sddbt" placeholder="省度电补贴" suffix="元/kW·h"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="省补贴年限" prop="sbtnx">
<a-input v-model="dataForm.sbtnx" placeholder="省补贴年限" suffix="年"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="12"></a-col>
</a-row>
<!-- 第七 -->
<a-row>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="市度电补贴" prop="shiddbt">
<a-input v-model="dataForm.shiddbt" placeholder="市度电补贴" suffix="元/kW·h"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="市补贴年限" prop="shibtnx">
<a-input v-model="dataForm.shibtnx" placeholder="市补贴年限" suffix="年"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="12"></a-col>
</a-row>
<a-row>
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
<div
style="display: flex;justify-content: space-between;vertical-align: middle;align-items: center"
>
<div
style="display: flex;justify-content: flex-start;vertical-align: middle;align-items: center"
>
<h3 style="color: #16F5E6;">投资数据</h3>
</div>
</div>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="折现率" prop="zxl">
<a-input v-model="dataForm.zxl" placeholder="请输入" suffix="%"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8" :xxl="8">
<a-form-model-item label="建议取值在8%左右"></a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10" :xxl="10"></a-col>
</a-row>
<a-row>
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
<div style="text-align: center">
<a-form-model-item>
<a-space>
<a-button
type="primary"
style="color: #030822 !important;background: linear-gradient(45deg,#39a1e8,#17f5e6) !important;border: none !important;"
@click="handleStartCommunicate()"
>开始测算</a-button>
</a-space>
</a-form-model-item>
</div>
</a-col>
</a-row>
</a-form-model>
</a-card>（2）js
<script>
const provinceData = ['杭州市', '温州市', '嘉兴市', '绍兴市', '宁波'];
export default
name: 'defectSearch', //缺陷处理
data()
return
loading: false,
provinceData,
rules1:
selectArea: [ required: true, message: '必填项不能为空', trigger: 'change' ],
installedCapacity: [ required: true, message: '必填项不能为空', trigger: 'change' ],
mwzj: [ required: true, message: '必填项不能为空', trigger: 'change' ],
zymj: [ required: true, message: '必填项不能为空', trigger: 'change' ],
yearSunHour: [ required: true, message: '必填项不能为空', trigger: 'change' ],
htnx: [ required: true, message: '必填项不能为空', trigger: 'change' ],
rent: [ required: true, message: '必填项不能为空', trigger: 'change' ],
hwnf: [ required: true, message: '必填项不能为空', trigger: 'change' ],
highLowPressure: [ required: true, message: '必填项不能为空', trigger: 'change' ],
zfzybl: [ required: true, message: '必填项不能为空', trigger: 'change' ],
zhdj: [ required: true, message: '必填项不能为空', trigger: 'change' ],
djzkl: [ required: true, message: '必填项不能为空', trigger: 'change' ],
zxl: [ required: true, message: '必填项不能为空', trigger: 'change' ]
, //验证规则
dataForm:
selectArea: provinceData[0],
installedCapacity: '', //装机容量
mwzj: '', //每瓦造价
zymj: '', // 租用面积
yearSunHour: '',
htnx: '', // 合同年限
rent: '', //租金
hwnf: '', //换瓦年份
highLowPressure: null,
zfzybl: '',
zhdj: '',
djzkl: '', //电价折扣率
gjddbt: '', //国家度电补贴
gjbtnd: '', //国家补贴年度
sddbt: '', //省度电补贴
sbtnx: '', //省补贴年限
shiddbt: '', //市度电补贴
shibtnx: '', //市补贴年限
zxl: '', // 折现率
, //表单项数据
,
methods:
//开始测算（调取测算接口）
handleStartCommunicate()
let _this = this,
queryParams = this.dataForm;
_this.$refs.dataForm.validate(valid =>
if (valid)
_this.loading = true;
// saveCommunicate(queryParams)
// .then(( data: res ) =>
// if (res.code !== 0)
// _this.loading = false;
// return _this.$message.error(res.msg);
//
// _this.loading = false;
// )
// .catch(error =>
// console.log(error);
// _this.loading = false;
// );
this.$refs.dataForm.resetFields();
this.$message.success('提交成功,正在测算');
else
return false;
);
</script>（3）
2.效果：
3.参考:
Ant-design Of Vue 的FormModel：Ant Design Vue
以上是关于Ant Design of Vue中a-form-model多行表单对齐和验证的主要内容，如果未能解决你的问题，请参考以下文章
ant-design-vue 之form表单中label-col和wrapper-col使用
ant-design-vue——select下拉框tags清空已选数据