vue iview 多form校验

最新推荐文章于 2024-08-10 11:51:29 发布

天空之枫

最新推荐文章于 2024-08-10 11:51:29 发布

阅读量607

点赞数

分类专栏： iview vue js

本文链接：https://blog.csdn.net/sinat_24713805/article/details/105378680

版权

js 同时被 3 个专栏收录

65 篇文章 1 订阅

订阅专栏

vue

45 篇文章 0 订阅

订阅专栏

iview

15 篇文章 0 订阅

订阅专栏

项目需要点击按钮生成多人员表单,我这只取部分代码作为示例

<Form :label-width="90" :ref="'form'+index" v-for="(form,index) in paersonInfos" :rules="ruleValidate" :key="index" :style="paersonInfos.length -1 != index?'border-bottom:1px dotted #ccc;':''">
     <Row :style="index !=0?'padding-top:20px;':''">
         <Col span="11">
           <FormItem label="名称:" class="checkIcon" :prop='`${index}`' :rules="ruleValidate.objectname">
              <Input clearable v-model="form.objectname" placeholder="必填项" style="width: 200px"/>
           </FormItem>
    </Row>
    <Row style="padding-bottom:16px;">
         <Col span="12" :span="paersonInfos.length == 1? '24':'12'" style="text-align:center;">
            <Button type="dashed" custom-icon=" ivu-icon ivu-icon-md-add" @click="addPerson(index)" size="large">添加人员</Button>
         </Col>
         <Col span="12" style="text-align:center;" v-if="paersonInfos.length != 1">
             <Button type="dashed" custom-icon="ivu-icon ivu-icon-md-remove" @click="removePerson(index)" size="large">删除人员</Button>
         </Col>
    </Row>
</Form>

根据prop获取元素位置，rule调用执行

export default {
        name: "add",
        data(){
            paersonInfos:[
              {
                objectname:''
              }
        },
        methods:{
           addPerson(index){
               let _this = this;
               var init = {
                    objectname:''
                  }

               _this.paersonInfos.splice(index+1,0,init);
            }
        },
        created:function(){
            const checkname = (rule, value, callback) => {
                if (util.isBlank(this.personInfos[rule.field].objectname)) {
                    callback(new Error('请输入名称'));
                } else {
                    callback();
                }
            };

            this.ruleValidate = {
                objectname:[
                    { required: true, validator: checkname, trigger: 'blur' }
                ]
            }
        }
}