首页 > 其他分享 >a-form-item内多个字段表格校验

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

时间:2023-05-16 16:44:40浏览次数:31  
标签:form oneBox 校验 height ant item position

<!--用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%;
}

标签:form,oneBox,校验,height,ant,item,position
From: https://www.cnblogs.com/Sultan-ST/p/17406102.html

相关文章

  • js---校验身份证号码
    分享一个校验身份证号码的JS代码://校验身份证号码exportfunctionisIdCard(idCard){//15位和18位身份证号码的正则表达式varregIdCard=/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((......
  • C#语音播报报:Speech is not supported on this platform.错误
    在C#进行文字转语音时,运行报System.PlatformNotSupportedException:“Speechisnotsupportedonthisplatform.”错误,运行的代码如下:usingSystem;usingSystem.Speech.Synthesis;namespaceConsoleApp3{internalclassProgram{staticvoidMain(string[]ar......
  • httprunner 4.x学习 - 4.提取返回结果与校验(extract, validate)
    执行命令:hrprun.\test_extract.yml--gen-html-report日志:6:03PMINFvalidatestatus_codeassertMethod=eqcheckExpr=status_codecheckValue=200checkValueType=int64expectValue=200expectValueType=int64result=true6:03PMINFrunstependexportVars={"ag......
  • spring-boot-starter-validation数据校验全局异常拦截处理(转发)
    原版参考:https://blog.csdn.net/tangyb828/article/details/126884417特殊备注:简要整理笔记,非原著一、引用Maven<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId></dependenc......
  • AntDesign的Form表单内容有值但是仍然报请输入的错误
    案例解决方案a-form标签上有:model="formState"a-form-item中的name值和v-model:value对应值保持一致案例<a-form:label-col="labelCol":wrapper-col="wrapperCol"ref="formRef":model="formState">......
  • 基于jeesite如何实现多tab页切换时,对应Form表单进行刷新?
    思路:点击tab切换时,触发form表单的submit请求,从而实现刷新效果1、给tab加id:<liclass="active"><ahref="#tab-1"id="prepareTab"data-toggle="tab">待办事项</a></li>2、增加一个查询按钮,发送submit请求,可以隐藏<buttontype="submit&quo......
  • SQLiteManager 第二部分
    //一些常用的查询方法(其实如果熟悉SQL的话,直接用ExecuteQuery更方便)//这部分直接复制到SQLiteManager类里面就可以//SQLite没有逻辑型,一般用0/1表示//在比照文本型时,别忘了手动给string参数值加上单引号publicList<TableColInfo>GetTableColInfos(stringtable......
  • C# Winform 界面操作异步回调 AsyncCallback
    usingSystem;usingSystem.Collections.Generic;usingSystem.Threading;usingSystem.Windows.Forms;namespaceWindowsFormsApp1{publicpartialclassForm1:Form{publicForm1(){InitializeComponent();m......
  • 三菱通过485bd板 CRC指令通讯示例 不含详细校验程序。
    三菱通过485bd板CRC指令通讯示例不含详细校验程序。所需硬件:三菱FX3Uplc,FX3U485BD通讯板,台达VFD-M变頻器。可以实现的功能:控制方面,正反转停止,頻率设定;读取运行状态、运行頻率、頻率指令、运行电流。内容包括plc程序,触摸屏程序,变頻器参数设置,通讯接线,视频教程。另外说明,别......
  • fx3u和两台变频器的rtu通讯程序含详细校验程序
    fx3u和两台变频器的rtu通讯程序含详细校验程序fx3u加485bd扩展板,从站一台使用台达VFD-M,一台使用三菱E700,可以分别控制正反转及停止,频率的设定,也可以实现运转数据及状态的监控,响应快,数据准确,其他变频器支持modbusrtu协议也可以的,有教程送。ID:79155916027085......