• Vue+iview 组件中通过v-for循环动态生成form表单进行表单校验


    在做项目时,需要根据需要动态添加或新增表单,同时还需要对表单做校验。详情如下图:

    刚开始做表单验证的时候,对于这个动态的表单验证有点难搞,试了好几种方法都没有搞定。最后按照下面这种方法实现了,以此篇博客留作记录,方便下次遇到类似的需求时直接开发。

    1. <row v-for="(item,index) in dataList">
    2. <i-Form :model="item" :ref="'dataList'+index" :label-width="language=='en'?140:120">
    3. <i-col span="10" >
    4. <Form-Item label="<@s.message code ="KSGL.LABLE.KAOSHIRQI"/>" :rules="[{required: true, message: '必填'}]"A prop="ksrqs">
    5. <date-picker :value="item.ksrqs" @on-change="item.ksrqs=$event" format="yyyy-MM-dd" type="date" placeholder="" style="width: 200px">date-picker>
    6. Form-Item>
    7. i-col>
    8. <i-col span="10" >
    9. <Form-Item label="备注1" prop="bz">
    10. <i-Input type="text" v-model="item.bz">i-Input>
    11. Form-Item>
    12. i-col>
    13. <i-col span="4" >
    14. <i-Button size="small" type="error" @click="handleRemove(index)"><@s.message code ='ACTION.REMOVE'/>i-Button>
    15. i-col>
    16. i-Form>
    17. row>

    1. let arr = [];
    2. for (var i=0;idataList.length;i++){
    3. let form = 'dataList' + i;
    4. self.$refs[form][0].validate((valid) => {
    5. if (valid) {
    6. arr.push(true);
    7. } else {
    8. arr.push(false);
    9. }
    10. });
    11. }
    12. let flag = arr.every((item) => {
    13. console.log('item',item)
    14. return item === true;
    15. });
    16. if (flag) {
    17. self.$Modal.confirm({
    18. title: i18n('MODEL.CONFIRM_TITLE'),
    19. content: i18n('MODEL.CONFIRM_CONTENT'),
    20. //loading: true,
    21. okText: i18n('MODEL.CONFIRM_OK_TEXT'),
    22. cancelText: i18n('MODEL.CONFIRM_CANCEL_TEXT'),
    23. onOk: function() {
    24. },
    25. onCancel: function() {
    26. self.$Message.info({content:i18n('MODEL.CONFIRM_ON_CANCEL'),duration: 10,background: true,closable: true});
    27. }
    28. });
    29. } else {
    30. self.$Message.error({content:i18n('VALIDATE.FORM_ERROR'),duration: 10,background: true,closable: true});
    31. }

  • 相关阅读:
    【linux】手动配置静态IPv4
    Editors(Vim)
    水库大坝安全监测方案,筑牢水库安全防线!
    005 gtsam/examples/easyPoint2KalmanFilter.cpp
    springboot高版本默认不支持循环依赖
    状态模式-对象状态及其转换
    Java基础深化和提高-------IO流
    黄金投资面对K线图有哪些好用的交易策略?
    聚观早报 | 苹果秋季发布会定档9月7日;​饿了么与抖音达成合作
    Java处理日期
  • 原文地址:https://blog.csdn.net/ding43930053/article/details/133271076