ant design vue动态循环生成表单以及自定义校验规则详解

 更新时间:2024年01月03日 10:03:53   作者:轻叹年华逝,  
这篇文章主要介绍了ant design vue动态循环生成表单以及自定义校验规则详解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

在ant design vue开发中有时候会利用后台数据循环生成表单,需要我们绑定prop以及自定义校验事件

以下是我用官网提供的方法结合自身项目写出来的总结

一、首先在data里定义表单数据

// 循环生成的人员表单数据
addManForm:{
    manObjList:[
        {
            person_info_company_guid:undefined,//所属公司
            person_info_team_guid:undefined,//班组
            person_info_plan_sum:'',//计划投入数量
            person_info_plan_time:undefined,//计划投入时间
            person_info_sum:'',//实际投入数量
            person_info_time:undefined,//实际投入时间
            person_info_remark:'',
            currentParentGuid:'',//当前选中的行,用于添加的的父级id
        }
    ]
},

二、在对话框内循环生成表单

<a-modal
	:title="addManTitle"
	:visible="manModalVisible"
	@ok="manModalOk"
	@cancel="manModalCancel"
	okText="确定"
	cancelText="取消"
	:mask=false
	:zIndex=1000
	:width=850>
	    <a-form-model ref="addManFormRef" :model="addManForm" :label-col="{span:7}" :wrapper-col="{ span: 16 }">
	        <a-row>
	        </a-row>
	        <div class="manContent">
	            <div class="manSingle" v-for="(item,index) in addManForm.manObjList" :key="index">
	                <div class="title">
	                    <div class="iconOperate">
	                        <a-icon type="up"  v-if="manArrowState && index==0" @click="manFold"/>
	                        <a-icon type="down" v-if="!manArrowState && index==0"  @click="manUnfold"/>
	                        <i class="iconfont iconicon-test" v-if="!btnVisible && index==0" @click="addManObjList"></i>
	                        <i class="iconfont iconshanchu" v-if="!btnVisible && index==0" @click="delManObjList"></i>
	                    </div>
	                </div>
	                <div class="manContainer">
	                    <a-row>
	                        <a-col :span="12">
	                            <a-form-model-item label="所属公司:" :prop="'manObjList.'+index+'.person_info_company_guid'"
	                                :rules="[{ required: true, message: '所属公司不能为空', trigger: 'change'}]">
	                                <a-tree-select
	                                    v-model="item.person_info_company_guid"
	                                    :tree-data="companySelectData"
	                                    style="width:100%"
	                                    placeholder="请选择所属公司"
	                                    allow-clear
	                                    :disabled="modalDisabled"
	                                    tree-default-expand-all/>
	                            </a-form-model-item>
	                        </a-col>
	                        <a-col :span="12">
	                            <a-form-model-item label="所属班组:"  :prop="'manObjList.'+index+'.person_info_team_guid'"
	                                :rules="[{ required: true, message: '所属班组不能为空', trigger: 'change'}]">
	                                <a-tree-select
	                                    v-model="item.person_info_team_guid"
	                                    :tree-data="teamSelectData"
	                                    style="width:100%"
	                                    placeholder="请选择所属班组"
	                                    allow-clear
	                                    :disabled="modalDisabled"
	                                    tree-default-expand-all/>
	                            </a-form-model-item>
	                        </a-col>
	                    </a-row>
	                    <a-row>
	                        <a-col :span="12">
	                            <a-form-model-item label="计划投入数量:"  :prop="'manObjList.'+index+'.person_info_plan_sum'"
	                                :rules="[{type: 'number', message: '仅支持输入数字', trigger: 'blur' ,transform(value){ 
	                                    if(value){
	                                        // 将输入的值转为数字
	                                        var val = Number(value)
	                                        if(/^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/.test(val)) return val
	                                        // 返回false即为校验失败
	                                        return false
	                                    }
	                                }},
	                                {required:true,message:'计划投入数量不能为空',trigger: 'blur'}]">
	                                <a-input v-model="item.person_info_plan_sum" :disabled="modalDisabled" placeholder="请输入计划投入数量" />
	                            </a-form-model-item>
	                        </a-col>
	                        <a-col :span="12">
	                            <a-form-model-item label="计划投入时间:" :prop="'manObjList.'+index+'.person_info_plan_time'"
	                                :rules="[{ required: true, message: '计划投入时间不能为空', trigger: 'change'},
	                                {validator:manPlanTime}]">
	                                <a-date-picker v-model="item.person_info_plan_time" format="YYYY-MM-DD" :disabled="modalDisabled" style="width:100%"/>
	                            </a-form-model-item>
	                        </a-col>
	                    </a-row>
	                    <a-row>
	                        <a-col :span="12">
	                            <a-form-model-item label="实际投入数量:"  :prop="'manObjList.'+index+'.person_info_sum'"
	                                :rules="[{type: 'number', message: '仅支持输入数字', trigger: 'blur' ,transform(value){ 
	                                    if(value){
	                                        // 将输入的值转为数字
	                                        var val = Number(value)
	                                        if(/^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/.test(val)) return val
	                                        // 返回false即为校验失败
	                                        return false
	                                    }
	                                }},
	                                {required:true,message:'实际投入数量不能为空',trigger: 'blur'}
	                            ]">
	                                <a-input v-model="item.person_info_sum" :disabled="modalDisabled" placeholder="请输入实际投入数量"/>
	                            </a-form-model-item>
	                        </a-col>
	                        <a-col :span="12">
	                            <a-form-model-item label="实际投入时间:" :prop="'manObjList.'+index+'.person_info_time'"
	                                :rules="[{ required: true, message: '实际投入时间不能为空', trigger: 'change'},
	                                {validator:manActualTime}]" >
	                                <a-date-picker v-model="item.person_info_time" placeholder="请选择实际投入时间" style="width:100%" :disabled="modalDisabled"/>
	                            </a-form-model-item>
	                        </a-col>
	                    </a-row>
	                    <a-row>
	                        <a-col :span="12">
	                            <a-form-model-item label="备注:"  :prop="'manObjList.'+index+'.person_info_remark'"
	                            :rules="[{max: 200, message: '备注长度不能大于200', trigger: 'blur' }]">
	                                <a-input type="textarea" v-model="item.person_info_remark" placeholder="请输入备注" :disabled="modalDisabled"/>
	                            </a-form-model-item>
	                        </a-col>
	                    </a-row>
	                </div>
	            </div>
	        </div>
	    </a-form-model>
	</a-modal>

fold和unfold方法控制展开折叠,addManObjList添加一组数据,delManObjList删除一组数据

注:prop要动态绑定,数组+索引+字段名=》manObjList.’+index+’.person_info_remark’

三、添加数据方法

// 添加一个人员信息表单
addManObjList(){
    this.addManForm.manObjList.push( {
        person_info_company_guid:undefined,//所属公司
        person_info_team_guid:undefined,//班组
        person_info_plan_sum:'',//计划投入数量
        person_info_plan_time:undefined,//计划投入时间
        person_info_sum:'',//实际投入数量
        person_info_time:undefined,//实际投入时间
        man_deviation_number:'',//投入数量偏差
        man_deviation_time:'',//投入时间偏差
        person_info_remark:'',
        currentParentGuid:'',//当前选中的行,用于添加的的父级id
    })
},

循环表单中的自定义校验

在a-form-model-item中绑定动态rules

:rules="[
	{required: true, message: '计划投入时间不能为空', trigger: 'change'},
	{validator:manPlanTime}
]"
// 人员的校验规则,计划时间
manPlanTime(rule,value,callback){
    let planTimeArr = this.addManForm.manObjList.filter(item=>{
        return item.person_info_plan_time == value
    })
    if(value && planTimeArr[0].person_info_time){
        if(this.$moment(value).format('YYYY-MM-DD') > this.$moment(planTimeArr[0].person_info_time).format('YYYY-MM-DD')){
            callback(new Error('计划投入时间不得大于实际投入时间'))
            return false
        }
        callback()
    }
    callback()
},

写在最后

这样就能完成一个循环生成表单且完成自定义表单校验,但还有一个小瑕疵,动态生成的日期选择框绑定的是UTC格式的日期,而不是组件本身绑定的moment对象的日期格式。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 带你熟练掌握Vue3之Pinia状态管理

    带你熟练掌握Vue3之Pinia状态管理

    pinia是vue3官方的状态管理工具,当然vue2也可以用,vue2中的状态管理工具是vuex,vue3中不再使用vuex,推荐使用的是pinia,和vuex差不多,但比vuex更方便、更强、更好,下面这篇文章主要给大家介绍了关于Vue3之Pinia状态管理的相关资料,需要的朋友可以参考下
    2022-11-11
  • Vue分页组件实现过程详解

    Vue分页组件实现过程详解

    Web应用程序中资源分页不仅对性能很有帮助,而且从用户体验的角度来说也是非常有用的。在这篇文章中,将了解如何使用Vue创建动态和可用的分页组件
    2022-12-12
  • vuejs2.0运用原生js实现简单的拖拽元素功能示例

    vuejs2.0运用原生js实现简单的拖拽元素功能示例

    本篇文章主要介绍了vuejs2.0运用原生js实现简单的拖拽元素功能示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-02-02
  • 使用webstorm配置vue+element开发环境

    使用webstorm配置vue+element开发环境

    这篇文章主要介绍了使用webstorm配置vue+element开发环境,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue对象复制方式(深拷贝,多层对象拷贝方式在后面)

    vue对象复制方式(深拷贝,多层对象拷贝方式在后面)

    这篇文章主要介绍了vue对象复制方式(深拷贝,多层对象拷贝方式在后面),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue - vue.config.js中devServer配置方式

    vue - vue.config.js中devServer配置方式

    今天小编就为大家分享一篇vue - vue.config.js中devServer配置方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue使用Vuex状态管理模式

    vue使用Vuex状态管理模式

    这篇文章介绍了vue使用Vuex状态管理模式的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-04-04
  • vue+elementui实现表格多级表头效果

    vue+elementui实现表格多级表头效果

    这篇文章主要为大家详细介绍了vue + elementui实现表格多级表头,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • uniapp Vue3中如何解决web/H5网页浏览器跨域的问题

    uniapp Vue3中如何解决web/H5网页浏览器跨域的问题

    存在跨域问题的原因是因为浏览器的同源策略,也就是说前端无法直接发起跨域请求,同源策略是一个基础的安全策略,但是这也会给uniapp/Vue开发者在部署时带来一定的麻烦,这篇文章主要介绍了在uniapp Vue3版本中如何解决web/H5网页浏览器跨域的问题,需要的朋友可以参考下
    2024-06-06
  • vue3弹出层V3Popup实例详解

    vue3弹出层V3Popup实例详解

    这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01

最新评论