【无标题】

于 2024-05-30 11:08:02 发布
阅读量199 收藏 3
点赞数 6
文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41977129/article/details/139318146
版权

a-form表单动态添加项目校验

案例一

在这里插入图片描述

完整代码

<a-form-model
        ref="ruleForm"
        :model="ruleForm"
        >
        <a-row>
          <a-col :span="12">
            <a-form-model-item :label-col="{span:6}" :wrapper-col="{span:6}" label="名称" prop="name">
              <a-input disabled placeholder="请输入名称" v-model="ruleForm.name" :maxLength="1000" style="width:200px;"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label-col="{span:6}" :wrapper-col="{span:6}" label="主体名称">
              <a-input disabled placeholder="请输入主体名称" v-model="ruleForm.companyName" :maxLength="1000" style="width:200px"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item v-for="(domain,index) in ruleForm.checkDomains" :key="index" style="margin-bottom:0">
          <a-row :span="24">
            <a-col :span="9">
              <a-form-model-item label="巡查事项" prop="checkItem"  :rules="{required: domain.checkItem?false:true, message: '请选择', trigger: 'blur'}" :label-col="{span:8}" :wrapper-col="{span:6}">
                <a-select v-model="domain.checkItem" @change="changeCheckItem" placeholder="请选择" style="width:180px;" allowClear>
                  <a-select-option v-for="item in checkItemOptions" :key="item.id" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item prop="checkItemContent" :rules="{required: domain.checkItemContent?false:true, message: '请选择', trigger: 'blur'}" :label-col="{span:0}" :wrapper-col="{span:6}">
                <a-select 
                  v-model="domain.checkItemContent" 
                  showSearch 
                  :filterOption="filterOption"
                  :not-found-content="null" 
                  placeholder="请选择" 
                  style="width:180px;" 
                  allowClear>
                  <a-select-option 
                    v-for="item in checkItemContentOptions" 
                    :key="item.id" 
                    :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item prop="checkItemDesc" :rules="{required: domain.checkItemDesc?false:true, message: '请输入', trigger: 'blur'}" :wrapper-col="{span:6}">
                <a-input v-model="domain.checkItemDesc" placeholder="请输入" style="width:180px;"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="3">
              <a-form-model-item v-if="index == 0">
                <a-icon type="plus-circle" style="fontSize:20px;cursor:pointer;display:inline-block;margin-top:10px;margin-left:10px;" @click="add"></a-icon>
              </a-form-model-item>
              <a-form-model-item v-if="index != 0">
                <a-icon type="minus-circle-o" style="fontSize:20px;cursor:pointer;display:inline-block;margin-top:10px;margin-left:10px;" @click="sub(domain)"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model-item>
        <a-row>
          <a-col :span="24">
             <a-form-model-item prop="result" :rules="{required: ruleForm.result?false:true, message: '请选择巡查结果', trigger: 'blur'}" :label-col="labelCol" :wrapper-col="wrapperCol" label="巡查结果">
                <a-radio-group v-model="ruleForm.result" @change="onChangeResult">
                  <a-radio v-for="item in checkResultOptions" :key="item.id" :value="item.id">{{item.name}}</a-radio>
                </a-radio-group>
              </a-form-model-item>
          </a-col>
        </a-row>
        
        <a-form-model-item v-if="ruleForm.result==2" :label-col="labelCol" :wrapper-col="wrapperCol" label="结果描述">
          <a-checkbox-group
            v-model="ruleForm.resultDescription"
            name="checkboxgroup"
            :options="checkResultDescOptions"
          />
        </a-form-model-item>
        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="巡查描述">
          <a-textarea
            v-model="ruleForm.description"
            placeholder="请输入巡查描述"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-model-item>
        <a-form-model-item v-if="ruleForm.result==1" :label-col="labelCol" :wrapper-col="wrapperCol" label="上传文件">
          <a-upload
            :file-list="filelist"
            :before-upload="(file)=>{beforeUpload(file);return false}"
            :remove="(file)=>{removeFile(file)}"
            :multiple="true"
            accept=".xls,.xlsx,.doc,.docx,.pdf">
            <a-button style="margin-left:10px" type="primary">点击上传</a-button>
          </a-upload>
        </a-form-model-item>
      </a-form-model>

核心代码

a-form-model 里的a-form-model-item可以继续嵌套a-form-model-item (也就是动态添加的内容)
每条规则对应每条a-form-model-item
在这里插入图片描述

获取每条动态的数据参数请添加图片描述

案例二

请添加图片描述

完整代码

<a-form-model ref="formUpload" :model="formUpload" layout="inline">
      <!-- :prop="'domains.' + index + '.'+domain.prop.name"
        :rules="{
          required: true,
          message: 'domain can not be null',
          trigger: 'blur',
        }" -->
        <!--  :key="domain.key"   -->
      <a-form-model-item
        v-for="(domain, index) in formUpload.domains"
        :key="index"
      >
        <a-form-model-item label="报告名称" prop="name" :rules="{required: domain.name?false:true, message: '请选择文件进行上传', trigger: 'blur'}">
          <span :title="domain.name" class="nameEllipsis">{{domain.name}}</span>
        </a-form-model-item>
        <a-form-model-item label="报告所属" prop="belong" :rules="{required: domain.belong?false:true, message: '请选择报告所属', trigger: 'blur'}">
          <a-select placeholder="请选择报告所属" style="width:150px;" v-model="domain.belong">
            <a-select-option v-for="item in reportBelongOptions" :key="item.k">{{item.v}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="报告类型" prop="type" :rules="{required: domain.type?false:true, message: '请选择报告类型', trigger: 'blur'}">
          <a-select placeholder="请选择报告类型" style="width:150px;" v-model="domain.type">
            <a-select-option v-for="item in reportTypeOptions" :key="item.k">{{item.v}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-upload
            style="width:250px;"
            accept=".doc,.docx,.pdf,.xls,.xlsx"
            :multiple="true"
            :file-list="domain.fileList"
            :before-upload="(file)=>{beforeUpload(file,index);return false}"
            :remove="(file)=>{removeFile(file,index)}">
            <a-button>
              <a-icon type="upload"></a-icon>选择文件
            </a-button>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item v-if="index==0 && formUpload.domains.length!=5">
          <a-icon type="plus-circle" style="fontSize:20px;cursor:pointer;display:inline-block;margin-top:10px;" @click="add"></a-icon>
        </a-form-model-item>
        <a-form-model-item v-if="index == 0 && formUpload.domains.length==5">
          <a-icon type="minus-circle-o" style="fontSize:20px;cursor:pointer;display:inline-block;margin-top:10px;" @click="sub(domain)"/>
        </a-form-model-item>
        <a-form-model-item v-if="index != 0">
          <a-icon type="minus-circle-o" style="fontSize:20px;cursor:pointer;display:inline-block;margin-top:10px;" @click="sub(domain)"/>
        </a-form-model-item>
      </a-form-model-item>
    </a-form-model>


// data中的数据默认
data() {
    return {
      fileList:[],
      formUpload: {
        domains: [
          {
            name:undefined,
            belong: undefined,
            type: undefined,
            fileList: [],
            url: undefined
          }
        ]
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
      }
    };
  },
你看我在发光吖
关注
  • 6
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用antd开发可动态增加项的表单
x先生的博客
08-14 3万+
我不知道应该怎么描述这个功能才算清晰，看图吧 环境是在antd的Form组件内开发大概的功能如下： 用户需要选择异常情况通知方式，并填写最少一个最多三个的联系人姓名和联系方式。 期望用户点击加号，可以增加一条，最多三条。 内容需校验，输入不能为空，联系方式需要根据用户勾选的通知方式校验输入内容，即用户勾选短信时，联系方式校验规则为手机号，勾选邮件时，校验方式为邮箱。 输入部分的数据结构应...
antd a-form-model 动态表单 自定义校验柯里化
weixin_38992765的博客
09-15 2539
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
a-form行内表单校验
最新发布
mengyingqi的博客
03-07 289
【代码】a-form行内表单校验。
a-form（设计重置，赋值，校验）
weixin_44161385的博客
12-29 5799
1.在页面使用a-form 2.在beforeCreate中创建form beforeCreate() { this.form = this.$form.createForm(this); }, 3.使用 v-decorator 用idCard绑定input的值。 rules <a-form-item label="身份证号码" v-bind="formItemLayout" style="width: 40%;"> <a-input
Ant Design Vue a-form创建，赋值，获取，校验
NIKCFNIF_66666的博客
08-05 2171
1，创建a-form的form对象。4，重置form表单。
antdv a-form的校验方式（手把手 附送上传boundary二进制流方法）
qq_51111703的博客
05-11 1661
a-form校验解决方式（手把手）
Qt无标题窗口
05-21
在本文中，我们将深入探讨如何使用Qt框架创建一个无标题窗口，这在界面设计和自定义标题栏美化中非常有用。我们将关注`framelesswidget.cpp`、`main.cpp`、`framelesswidget.h`等核心文件，理解它们在实现无标题窗口...
VC去掉'无标题'字样的方法.zip
11-21
在使用Visual C++进行编程时，我们经常会在创建新的窗口或者对话框时默认看到标题栏显示为“无标题”。这可能会对用户界面的美观性和专业性造成一定的影响。本资料包提供了一种方法来帮助开发者去掉这个“无标题”...
visual c++取掉对话框窗口的 -无标题 字样的方法
08-04
在Visual C++编程环境中，创建窗口应用程序时，默认情况下，窗口标题栏可能会显示“-无标题”字样，这通常是由于没有正确设置窗口类或没有自定义窗口标题所导致的。要解决这个问题，我们需要深入理解Windows API中的...
c#实现无标题栏窗口的拖动
09-05
本篇文章将详细讲解如何在C#中实现这种无标题栏窗口的拖动以及其他基本操作。 首先，为了实现无标题栏窗口的拖动，我们需要处理窗体的鼠标事件。窗体的`FormBorderStyle`属性应设置为`None`，这会去除窗体的边框和...
Android 全屏无标题栏的三种实现方法
09-02
在Android应用开发中，有时我们需要实现全屏无标题栏的效果，以提供更加沉浸式的用户体验。以下将详细介绍三种在Android中实现全屏无标题栏的方法。 ### 方法一：通过Java代码 在Activity的`onCreate()`方法中，在...
Ant vue中表单验证（动态校验、部分校验）
qq_32944491的博客
09-19 7899
1.多看官方文档；2.多写多总结，无论时动态校验还是普通校验——prop和绑定的值要保持一致，这样才能实现规则校验。！
关于a-form-model-item的校验问题踩坑
热门推荐
qq_35478750的博客
09-19 1万+
关于a-form-model-item表单校验方式 对于vue，使用的比较多的方式为官方给出的 在整个表单外部 <a-form-model :rules="rules"> 在每个设置好prop的值，这样整个表单就能对相应的item项进行自动绑定校验 <a-form-model-item prop="ruleName"> 对于校验规则，vue2的用data（）中设置 data(){ const checkPerformanceSpec = (rule,
antd校验动态表单
qq_26234177的博客
07-04 841
校验的字段为：{message: '请输入···', field: '1.code'}表单新增一条相当于在数组中新增一条。其实本质是校验数组中每一项的数据。【公众号：缃言的调调】
ant-design-vue form表单实现动态循环效验
DJxyyy的博客
10-21 2513
ant-design-vue form表单实现动态循环效验表单
vue+a-form 动态表格,动态增加动态删除
花椒和蕊的博客
09-07 3341
思路借鉴了一位大佬的文章，原文地址如下: 版权声明：本文为qq_42203909原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：antd实现动态增减表单项，支持赋初始值！ 首先是封装子组件，自己起个名字。 v-decorator官网上是这么说的：经过 v-decorator 包装的控件，表单控件会自动添加 value ，数据同步将被 Form 接管，我自己的理解v-decorator相当于v-model绑的值，只是操作值的方法不一样，v-model可以直接赋值
动态添加表单
weixin_42378006的博客
03-30 1098
根据项目要求要动态添加表单并能传给后台，我采用的是ant design的FormModel 表单，动态增减表单项（在最后一个例子），如下图： 下面是我的实现图，主要有三个动态表单项 看似简单的个动态添加表单项，实则工作量很大，下面上代码： <a-form-item v-for="(k,index) in reportItems" ...
antd组件的动态表单新增与自定义校验
荤素菜鸟的博客
02-23 1678
<template> <div class="delivery-time-setting"> <a-form name="custom-validation" ref="formRef" :model="modelRef" :rules="rules" v-bind="layout" @finish="handleFinish" @finishFailed="handleFinishFailed" > <di
设置无标题 android
05-02
在Android应用中，设置无标题是一种简洁和美观的设计方式，可以为用户提供更流畅的使用体验。以下是一些实现设置无标题的方法： 1. 在Android的Manifest文件中，找到对应Activity的标签，并添加”android:theme="@android:style/Theme.NoTitleBar"“属性。这样可以通过Android自带的主题去掉标题栏。 2. 使用自定义的主题，可以在样式表中添加以下代码： <style name="AppTheme" parent="Theme.AppCompat.NoActionBar"> <!-- ...其他样式... --> </style> 这种方式可以通过设置主题去除ActionBar和标题栏，同时保留其他布局元素。 3. 去掉代码中的setTitle()方法，这是一种最简单的方法，通过不设置Activity的标题来实现无标题。 以上就是三种常见的实现Android无标题的方式，开发者可以根据实际需求进行选择。值得注意的是，去除标题栏可能会影响用户的导航体验，因此在设计上需要考虑周全。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值