【2.0版本】可自行增减的动态表单

介绍

关注编者博客的都知道小编的文章中有一篇动态表单文章，跳转链接，话说这篇文章写的是真的，，，，差，这篇文章小编就暂时不删了，留着提醒小编。好了，估计你看到这都烦了吧！！！
小白话不多说，下面就是对你们好的时候，直接放效果图，看各位是否喜欢，说错了，怎么能是喜欢呢，呸呸呸，应该是否符合你的口味，都看这了眼神下移，就可以看到效果图啦！！
单个动态表单：

效果图

单个动态表单效果图

多个动态表单效果图

多个动态表单：效果图

重点部分讲解

效果都看了吧，能看到这的估计有点符合你的需求，这里稍微多啰嗦几句：用户角度：用户可以自动根据要录入数据的多少来显示并填报信息；开发者角度：如何实现自动控制数据量呢？只要你学到了，发现不难，它是通过控制表单中的长度来控制的，难点也就在这：

这里小编主要一单个动态表单来进行详解：多个动态表单代码会自动附在最后。

正常情况下，表单prop定义：

<el-form :model="warnPeopleForm_one" ref="warnPeopleFormRef_one" :show-close="true">
    <el-row :gutter="10">
        <el-col :span="8">
            <el-form-item :prop="username" label="姓名" label-width="100px">
                <el-input type="text" v-model="item.username" style="width:150px;"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="9">
            <el-form-item :prop="phone_number" label="手机号" label-width="100px">
                <el-input type="text" v-model="item.phone_number" style="width:200px;"></el-input>
            </el-form-item>
        </el-col>
    </el-row>
</el-form>

而动态表单定义：

<el-form :model="warnPeopleForm_one" ref="warnPeopleFormRef_one" :show-close="true">
    <el-row :gutter="10" v-for="(item,index) in warnPeopleForm_one.object" :key="index">
        //这里要注意：v-for="(item,index) in warnPeopleForm_one.object" :key="index"，这里有一个for循环遍历
        <el-col :span="8">
            <el-form-item :prop="'object.' + index + '.username'" label="姓名" label-width="100px">
                <el-input type="text" v-model="item.username" style="width:150px;"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="9">
            <el-form-item :prop="'object.' + index + '.phone_number'" label="手机号" label-width="100px">
                <el-input type="text" v-model="item.phone_number" style="width:200px;"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="7">
            <el-button style="margin-top:8px;" type="success" plain round circle size="small" v-if=" index == warnPeopleForm_one.object.length - 1 " :v-show="warnPeopleForm_one.object[index] == ''? false:true" @click="addSender_1()" class="el-icon-circle-plus"></el-button>
            //type=“success”的按钮主要是新增新的一个表单的按钮控制。这里它借助v-if判断
            warnPeopleForm_one.object的长度和下标是否相同，相同时新增按钮显示，这里要特别注意：
            新增按钮应该显示在最后一个表单里
            <el-button style="margin-top:8px;" type="danger" size="small" plain round circle v-if="warnPeopleForm_one.object.length > 1" @click="removeSender_1(index)" class="el-icon-remove"></el-button>
            //type="danger"的按钮主要是来控制取消多余表单，这个也有个特别注意：
            当warnPeopleForm_one.object的长度小于1时，应该让其不显示，其它情况让它都显示，
            这里用户可以更好的自由的控制那个取消
        </el-col>
    </el-row>
</el-form>

看完，你会发现：两者的prop定义不同。先看data中是如何定义：

正常情况下，data定义：

warnPeopleForm_one: { 
     username:'',
     phone_number: '',
},

而动态表单的data定义：

warnPeopleForm_one: {   //一级推送
     object: [
           {
                username:'',
                phone_number: '',
                risk_level: '',   //小编这里主要是根据后端要求，将该条数据标注字段
          }
     ]
},

这里object为一个数组格式，在通过下标index来控制显示几个，说到这，你可能会想到，数据传值怎么呢
我们可以直接this.warnPeopleForm_one.object这样你就可以接到动态表单中的所有值，格式为：

[ {username: '人员1',phone_number:'人员1手机号',}, {username:'人员2',phone_number:'人员2手机号'}, ... {username:'人员3',phone_number:'人员3手机号'} ]

事件：

addSender_1(){  //添加更多联系人
            this.warnPeopleForm_one.object.push( { username:'', phone_number: '', risk_level: '1'})
        },
        removeSender_1(index){   //移除
            this.warnPeopleForm_one.object.splice( index, 1)
        },
        sub_all(warnPeopleFormRef_one){  //提交
            this.$refs.warnPeopleFormRef_one.validate(valid => {
                console.log(valid);
                console.log(this.warnPeopleForm_one.object);
            })
            var level = ""
            if(this.num == 1){
                level = '1'
            }else if(this.num == 2){
                level = '2'
            }else if(this.num == 3){
                level = '3'
            }
            const params = {
                // "risk_level": level,    //该字段根据自己的情况来定就好
                "user_list": this.warnPeopleForm_one.object,
            }
            // console.log(params);
            this.$http.post('',params).then(res => {
                // console.log(res);
                if(res.data.code == 200){
                    this.resultVisible = false
                    this.$notify({
                        title:"温馨提示",
                        type:"success",
                        message:this.$createElement("i",{style:"color:green"}, res.data.msg)
                    })
                    this.getData()
                }else{
                    this.$notify({
                        title:"温馨提示",
                        type:"warning",
                        message:this.$createElement("i",{style:"color:orange"}, res.data.msg)
                    })
                }
            })
        }

标记：多个动态表单代码：

<template>
    <div>
        <el-dialog :visible="warnVisible" :show-close="false" :title="title_name" width="800px">
            <div>
                <el-row>
                    <el-col :span="12">
                        <span style="width:100px;"><span style="color:red;"><b>*</b></span>工点</span>
                        <el-select @focus="get_workpoint()" v-model="workPointId" style="width:210px;margin-left:33px;" :rules="[{required: true, message: '必填项', trigger: 'blur'}]">
                            <el-option v-for="item in work_point_list" :key="item.index" :value="item.id" :label="item.name"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span='12' style="text-align:right;">
                        <span>"<span style="color:red;"><b>*</b></span>"<span style="background-color:#ffff99;">代表：必填项</span></span>
                    </el-col>
                </el-row>
            </div>
            <!-- 一级人员设置（30%以上） -->
            <div>
                <div style=" height:3vh;line-height:3vh;background-color:#FF7777;margin:10px 0px 10px 0px;"><span><b>一级人员设置（30%以上）</b></span></div>
                <el-form :model="warnPeopleForm_one" ref="warnPeopleFormRef_one" :rules="warnPeopleForm_one_rules">
                    <el-row :gutter="10" v-for="(item,index) in warnPeopleForm_one.object" :key="index">
                        <el-col :span="8">
                            <el-form-item :prop="'object.' + index + '.username'" label="姓名" label-width="100px">
                                <el-input type="text" v-model="item.username" style="width:150px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item :prop="'object.' + index + '.phone_number'" label="手机号" label-width="100px">
                                <el-input type="text" v-model="item.phone_number" style="width:200px;"></el-input>
                            </el-form-item>
                            
                        </el-col>
                        <!-- <el-col :span="2">
                            <el-form-item :v-show="false" :prop="'object.' + index + '.risk_level'" label="" label-width="">
                                <el-input disabled type="text" v-model="item.risk_level" style="width:20px;"></el-input>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="7">
                            <el-button style="margin-top:8px;" type="success" plain round circle size="small" v-if=" index == warnPeopleForm_one.object.length - 1 " :v-show="warnPeopleForm_one.object[index] == ''? false:true" @click="addSender_1()" class="el-icon-circle-plus"></el-button>
                            <el-button style="margin-top:8px;" type="danger" size="small" plain round circle v-if="warnPeopleForm_one.object.length > 1" @click="removeSender_1(index)" class="el-icon-remove"></el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <!-- 二级人员设置（15%~30%） -->
            <div>
                <div style="height:3vh;line-height:3vh;background-color:#FFC299;margin:10px 0px 10px 0px;"><span><b>二级人员设置（15%~30%）</b></span></div>
                <el-form :model="warnPeopleForm_two" ref="warnPeopleFormRef_two" :rules="warnPeopleForm_two_rules">
                    <el-row :gutter="10" v-for="(item,index) in warnPeopleForm_two.object" :key="index">
                        <el-col :span="8">
                            <el-form-item :prop="'object.' + index + '.username'" label="姓名" label-width="100px" >
                                <el-input type="text" v-model="item.username" style="width:150px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item :prop="'object.' + index + '.phone_number'" label="手机号" label-width="100px">
                                <el-input type="text" v-model="item.phone_number" style="width:200px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="2">
                            <el-form-item :v-show="false" :prop="'object.' + index + '.risk_level'" label="" label-width="">
                                <el-input disabled type="text" v-model="item.risk_level" style="width:20px;"></el-input>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="7">
                            <el-button style="margin-top:8px;" type="success" plain round circle size="small" v-if=" index == warnPeopleForm_two.object.length - 1 " @click="addSender_2()" class="el-icon-circle-plus"></el-button>
                            <el-button style="margin-top:8px;" type="danger" size="mini" plain round circle v-if="warnPeopleForm_two.object.length > 1" @click="removeSender_2(index)" class="el-icon-remove"></el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <!-- 三级人员设置（15%以内） -->
            <div>
                <div style="height:3vh;line-height:3vh;background-color:#FCFC9D;margin:10px 0px 10px 0px;"><span><b>三级人员设置（15%以内）</b></span></div>
                <el-form :model="warnPeopleForm_three" ref="warnPeopleFormRef_three" :rules="warnPeopleForm_three_rules">
                    <el-row :gutter="10" v-for="(item,index) in warnPeopleForm_three.object" :key="index">
                        <el-col :span="8">
                            <el-form-item :prop="'object.' + index + '.username'" label="姓名" label-width="100px">
                                <el-input type="text" v-model="item.username" style="width:150px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item :prop="'object.' + index + '.phone_number'" label="手机号" label-width="100px">
                                <el-input type="text" v-model="item.phone_number" style="width:200px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="2">
                            <el-form-item :v-show="false" :prop="'object.' + index + '.risk_level'" label="" label-width="">
                                <el-input disabled type="text" v-model="item.risk_level" style="width:20px;"></el-input>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="7">
                            <el-button style="margin-top:8px;" type="success" plain round circle size="small" v-if=" index == warnPeopleForm_three.object.length - 1 " @click="addSender_3()" class="el-icon-circle-plus"></el-button>
                            <el-button style="margin-top:8px;" type="danger" size="mini" plain round circle v-if="warnPeopleForm_three.object.length > 1" @click="removeSender_3(index)" class="el-icon-remove"></el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div style="margin-top:30px;">
                <el-button type="warning" round size="mini" @click="rest()">重置</el-button>
                <el-button type="info" round size="mini" @click="cel()">取消</el-button>
                <el-button type="primary" round size="mini" @click="sub_all('object')">新增提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    props:{
        warnVisible:{
            type: Boolean,
            require:true
        },
        title_name: {
            type: String,
            require: true
        },
        project_org_Id: {
            type: String,
            require: true
        },
        getData: {
            type: Function,
            require: true
        }
    },
    data(){
        var phone_ze = (rule, value, callback) => {
            const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
            if(!reg.test(value)){
                callback(new Error('手机号格式不正确'))
            }else{
                callback()
            }
        }
        var name_ze = (rule, value, callback) => {
            const reg = /^[\u4e00-\u9fa5]{2,4}$/
            if(!reg.test(value)){
                callback(new Error('名字长度为2~4'))
            }else{
                callback()
            }
        }
        return {
            work_point_list: [], 
            workPointId: '',   //工点id
            warnPeopleForm_one: {   //一级推送
                object: [
                    {
                        username:'',
                        phone_number: '',
                        risk_level: '1'
                    }
                ]
            },
            warnPeopleForm_one_rules:{
                name:[{required: true, message: name_ze, trigger: 'blur'}],
                phone: [{required: true, message: phone_ze, trigger: 'blur'}]
            },
            warnPeopleForm_two: {   //二级推送
                object: [
                    {
                        username:'',
                        phone_number: '',
                        risk_level: '2'
                    }
                ]
            },
            warnPeopleForm_two_rules:{
                name:[{required: true, message: name_ze, trigger: 'blur'}],
                phone: [{required: true, message: phone_ze, trigger: 'blur'}]
            },
            warnPeopleForm_three: {   //三级推送
                object: [
                    {
                        username:'',
                        phone_number: '',
                        risk_level: '3'
                    }
                ]
            },
            list: [],
            warnPeopleForm_three_rules:{
                name:[{required: true, message: name_ze, trigger: 'blur'}],
                phone: [{required: true, message: phone_ze, trigger: 'blur'}]
            },
        }
    },
    methods:{
        cel(){  //取消按钮
            this.$emit("update:warnVisible",false)
        },
        rest(){  //重置
            this.$refs.warnPeopleFormRef_one.resetFields()
            this.$refs.warnPeopleFormRef_two.resetFields()
            this.$refs.warnPeopleFormRef_three.resetFields()
            this.workPointId = ''
        },
        get_workpoint(){
            this.$http.get('/url/?project_id=' + this.project_org_Id,{ headers: { 'AUTHORIZATION':sessionStorage.token }}).then(res => {

                if(res.data.code == 200){
                    this.work_point_list = res.data.data
                }else{
                    this.$notify({
                        title:"温馨提示",
                        type:"warning",
                        message:this.$createElement("i",{style:"color:orange"},res.data.msg)
                    })
                }
            })
        },
        // 一级告警推送人--------------------------------------
        addSender_1(){  //添加更多联系人
            this.warnPeopleForm_one.object.push( { username:'', phone_number: '', risk_level: '1'})
        },
        removeSender_1(index){   //移除
            this.warnPeopleForm_one.object.splice( index, 1)
        },
        // 二级告警推送人--------------------------------------
        addSender_2(){  //添加更多联系人
            this.warnPeopleForm_two.object.push( { username:'', phone_number: '', risk_level: '2'})
        },
        removeSender_2(index){   //移除
            this.warnPeopleForm_two.object.splice( index, 1)
        },
        // 三级告警推送人--------------------------------------
        addSender_3(){  //添加更多联系人
            this.warnPeopleForm_three.object.push( {username:'', phone_number: '', risk_level: '3'})
        },
        removeSender_3(index){   //移除
            this.warnPeopleForm_three.object.splice( index, 1)
        },
        sub_all(warnPeopleFormRef_three,warnPeopleFormRef_two,warnPeopleFormRef_one){  //提交
            console.log('3333');
            this.$refs.warnPeopleFormRef_three.validate(valid => {
                console.log(valid);
                console.log(this.warnPeopleForm_three.object);
            })
            console.log('2222');
            this.$refs.warnPeopleFormRef_two.validate(valid => {
                console.log(valid);
                console.log(this.warnPeopleForm_two.object);
            })
            console.log('1111');
            this.$refs.warnPeopleFormRef_one.validate(valid => {
                console.log(valid);
                console.log(this.warnPeopleForm_one.object);
            })
            var list  = []
            for(var i=0; i< this.warnPeopleForm_one.object.length; i++ ){
                if(this.warnPeopleForm_one.object[i].username !=='' && this.warnPeopleForm_one.object[i].phone_number !== ''){
                    list.push(this.warnPeopleForm_one.object[i])
                }
            }
            for(var i=0; i< this.warnPeopleForm_two.object.length; i++ ){
                if(this.warnPeopleForm_two.object[i].username !=='' && this.warnPeopleForm_two.object[i].phone_number !== ''){
                    list.push(this.warnPeopleForm_two.object[i])
                }
            }
            console.log(typeof(this.warnPeopleForm_one.object[0].username));
            console.log('---');
            for(var i=0; i< this.warnPeopleForm_three.object.length; i++ ){
                if(this.warnPeopleForm_three.object[i].username !=='' && this.warnPeopleForm_three.object[i].phone_number !== ''){
                    list.push(this.warnPeopleForm_three.object[i])
                }
            }
            if(this.project_org_Id !== '' || this.project_org_Id !== 'undefined'){
                // console.log(typeof(this.project_org_Id));
                const params = {
                    'project_id': this.project_org_Id,
                    'work_point_id': String(this.workPointId),
                    'user_list': list,
                }
                // console.log(params);
                this.$http.post('/url/', params).then( res => {
                    if(res.data.code == 200){
                        this.$notify({
                            title:"温馨提示",
                            type:"success",
                            message:this.$createElement("i",{style:"color:green"},res.data.msg)
                        })
                        this.$emit("update:warnVisible",false)
                        this.getData()
                        this.$refs.warnPeopleFormRef_one.resetFields()
                        this.$refs.warnPeopleFormRef_two.resetFields()
                        this.$refs.warnPeopleFormRef_three.resetFields()
                        this.workPointId = ''
                    }else{
                        this.$notify({
                            title:"温馨提示",
                            type:"warning",
                            message:this.$createElement("i",{style:"color:orange"},res.data.msg)
                        })
                    }
                })
            }else{
                this.$notify({
                    title:"温馨提示",
                    type:"warning",
                    message:this.$createElement("i",{style:"color:orange"},'工点为必填项，请选择_')
                })
            }
        }
    },
    mounted(){
        
    }
}
</script>
<style>

</style>