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.效果：

Ant Design of Vue中a-form-model多行表單對齊和驗證

繼續閱讀

Spring MVC 接收多個實體參數

CSS中僞類和僞元素的差別

Vue項目 - 單檔案元件和Vue中的路由

基于Springboot+VUE+Mysql的大學生校園疫情防控管理系統

左耳朵耗子：程式員如何拿到年薪60萬的崗位？

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

Vue $emit 子元件向父元件傳遞參數

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題