a-form-item内多个字段表格校验

发布时间 2023-05-16 16:43:34作者: SultanST
<!--用a-form-item包裹a-form-item,两个都可进行校验,单个a-form-item里面只能进行一次校验,样式可以用定位进行调整-->
<a-col :span="6">
            <a-form-item label="上报年份/季度" class="oneBox" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
              <span class="shangBao">
                <a-select v-decorator="['sbYear', validatorRules.sbYear]" @change="changesbYear">
                  <a-select-option v-for="item in sbYearList" :key="item">
                    {{ item }}
                  </a-select-option>
                </a-select>
              </span>
              <span>年</span>
              <span class="twoBox">
                <a-form-item style="display:inline-block;">
                  <span class="shangBao">
                    <a-select v-decorator="['sbQuarter', validatorRules.sbQuarter]" @change="changesbQuarter">
                      <a-select-option v-for="item in sbQuarterList" :key="item">
                        {{ item }}
                      </a-select-option>
                    </a-select>
                  </span>
                  <span>季度</span>
                </a-form-item>
              </span>
            </a-form-item>
          </a-col>
.oneBox {
  position:relative;
  height:45px;
}
.oneBox .ant-form-item-control{
  height:45px;
}

.oneBox .ant-form-explain {
  position: absolute;
  left: 0px;
  bottom: -16px;
  width: 50%;
}
.oneBox .twoBox .ant-form-explain {
  position: absolute;
  left: 10px;
  bottom: -16px;
  width: 100%;
}