表单配置 不断新增

 

<template>
                <Form ref="formDynamic" :model="formDynamic" :label-width="150" style="position:relative;left:1%">
        <FormItem
                v-for="(item, itemIndex) in formDynamic.items" v-if="item.status==1"
                :key="itemIndex"
                :label="'集群 ' + item.itemIndex"
                :prop="'items.' + itemIndex + '.value'"
                :rules="{required: true, message: '集群名称不能为空', trigger: 'blur'}">
            <Row>
                    <Input type="text" @input="InputValue(item.value)"  v-model="item.value" placeholder="输入集群名称" style="width:200px"></Input>
                    <Button @click="handleRemove(itemIndex)" style="margin-left:20px">删除</Button>
            </Row>
            <Row>
                <CheckboxGroup v-model="item.checkbox">
                <Checkbox v-for="checkItem in checkList" :disabled="fromedit == 1 && item.disabled ==1" :key="checkItem.key" :label="checkItem.key">{{checkItem.name}}</Checkbox>
            </CheckboxGroup>
            </Row>
        </FormItem>
        <FormItem>
            
            <Button type="dashed" long @click="handleAdd" style="width:200px" icon="md-add">新增</Button>
        </FormItem>
        
    </Form>
</template>
<script>
            handleAdd () {
                this.itemIndex++;
                this.formDynamic.items.push({
                    value: '',
                    itemIndex: this.itemIndex,
                    checkbox: [],
                    status: 1
                })
            },
            handleRemove (itemIndex) {
                this.formDynamic.items[itemIndex].status = 0
                for (var i = 0;i < this.formDynamic.items.length; i++){
                    if (this.formDynamic.items[i].status==0){
                        this.formDynamic.items.splice(i,1);
                    }
                }
                this.itemIndex--
            },
</script>