动态增减 el-form 中的 el-input 输入框(带验证)

一. 看效果图

        

用户点击按钮 可以进行添加一行

二. 具体实现

        

<el-form :model="xqcunModel" :inline="true" ref="xqcunformRef" label-width="100px" class="demo-ruleForm" label-position="top">
            <div v-for="(item, index) in xqcunModel.dynamicItem" :key="index">
                <el-form-item
                    label="姓名"
                    :prop="'dynamicItem.' + index + '.name'"
                    :rules="{
                        required: true, message: '姓名不能为空', trigger: 'blur'
                    }"
                >
                    <el-input v-model="item.name"></el-input>
                </el-form-item>
                <el-form-item
                    label="手机号"
                    :prop="'dynamicItem.' + index + '.phone'"
                    :rules="[
                        {required: true, message: '手机号不能为空', trigger: 'blur'},
                        { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
                    ]"
                    >
                    <el-input v-model="item.phone"></el-input>
                </el-form-item>
                <el-form-item style="margin-top: 0.42rem; cursor: pointer;">
                    <i class="el-icon-delete" @click="deleteItem(item, index)"></i>
                </el-form-item>
            </div>
            <el-button @click="addItem">添加</el-button>
            <el-button @click="handlegetData">获取</el-button>
        </el-form>

添加的部分要用一个div包裹 而且在每个el-form-item 中写上自己的校验

<script>
export default {
    data() {
        return {
            xqcunModel: {
                dynamicItem: []
            },
            rules: []
        }
    },
    methods: {
        addItem () {
            this.xqcunModel.dynamicItem.push({
                name: '',
                phone: ''
            })
        },
        deleteItem (item, index) {
        this.xqcunModel.dynamicItem.splice(index, 1)
        },
        handlegetData() {
            console.log(this.xqcunModel.dynamicItem);
        }
    }
}
</script>