记录element-ui，form表单遇到的问题

自述

        近期想要总结一下工作以来记录下的问题日志，以便梳理自己的学习进程，也为了以后的学习（很多解决方案也是借鉴了网上大神的，但是时间太久的不记得连接了），如有不对，还望大神们多多指教:)

问题日志(1)——element-ui，form表单

1.两个表单在不同条件下交替出现校验提示问题

两个表单在不同条件下交替出现，这两个表单应用不同的校验规则，但绑定的数据有相同的字段，如果表单的显示与否使用v-if控制，则在表单切换的时候，两个表单相同的age字段校验提示会在另一个表单的相同位置显示。

        解决办法：使用v-show控制切换表单

2.表单下拉框初始赋值问题

表单新增属性并赋值后，下拉框选择，点击之后值有变化，但页面没有渲染。

原因：由于 JavaScript 的限制，Vue不能检测对象属性的添加或删除，导致数据双向绑定失效。
解决方案：1.使用vue.$set()方法。2.使用vue.$forceUpdate()强制vue实例重新渲染。
代码如下：

<template>
    <div style="width: 60%; margin-left: 20%;">
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="下拉框" prop="type">
                <el-select v-model="form.type" clearable filterable placeholder="请选择" @change="changeHandel">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item><el-button @click="confirm">提交</el-button></el-form-item>
        </el-form>
    </div>
</template>
<script>
	export default({
	    data(){
	        return {
	            form:{
	            },
	            options:[{
	                label:'选项1',
	                value:1
	            },{
	                label:'选项2',
	                value:2
	            },{
	                label:'选项3',
	                value:3
	            },{
	                label:'选项4',
	                value:4
	            },]
	        }
	    },
	    mounted(){
	        this.form.type=1
	        // this.$set(this.form,'type',e)//解决方案1，初始赋值使用$set
	    },
	    methods:{
	        changeHandel(e){
	            // this.$forceUpdate()//解决方案2，使用$forceUpdate()强制vue实例重新渲染
	            console.log(this.form.type)
	            
	        },
	    }
	})
</script>

参考连接：https://blog.youkuaiyun.com/Oralinge/article/details/103567230

3.循环数组动态表单校验。

需求背景，客户想要表单中动态输入x个目标信息，分一级目标和二级目标，可以有n个一级目标，一级目标下可包含m个二级目标，要求表单上所有项都校验必填，结果如下图。

实现方案：
需要校验的项设置动态prop，第一层:prop=“‘targetList.’+index+‘.title’”，
第二层:prop=“‘targetList.’+index+‘.targetList.’+index1+‘.title’”,
如果还有第三层，则为:prop="‘targetList.’+index+‘.targetList.’+index1+‘.targetList.’+index2+‘.title’"以此类推,要注意的是不要少了“.”

<el-form ref="anotherForm" :model="anotherForm" label-width="120px">
     <div v-for="(item,index) in anotherForm.targetList" :key="index" class="bg_gray padding_20 marign_20">
         <div class="target_item">
             <el-form-item :label="'一级目标'+(index+1)" :prop="'targetList.'+index+'.title'" :rules="[{required: true, message: '必填项', trigger: 'blur'}]">
                 <el-input v-model="item.title"></el-input>
             </el-form-item>
             <div>
                 <i @click="removeFirst(index)" class="el-icon-remove-outline"></i>
                 <i v-if="index==anotherForm.targetList.length-1" @click="addFirst()" class="el-icon-circle-plus-outline"></i>
             </div>
         </div>
         
         <div v-for="(item1,index1) in item.targetList" :key="index1" class="bg_gray1 padding_20">
             <div class="target_item">
                 <el-form-item :label="'二级目标'+(index1+1)+'标题'" :prop="'targetList.'+index+'.targetList.'+index1+'.title'" :rules="[{required: true, message: '必填项', trigger: 'blur'}]">
                     <el-input v-model="item1.title"></el-input>
                 </el-form-item>
                 <div>
                     <i @click="removeSecond(index,index1)" class="el-icon-remove-outline"></i>
                     <i v-if="index1==anotherForm.targetList[index].targetList.length-1" @click="addSecond(index)" class="el-icon-circle-plus-outline"></i>
                 </div>
             </div>
         </div>
     </div>
 </el-form>

data(){
    return {
        anotherForm:{
            targetList:[{title:'',targetList:[{title:'',content:''}]}]
        },
    }
},
methods:{
    removeFirst(index){
        this.anotherForm.targetList.splice(index,1)
    },
    addFirst(){
        this.anotherForm.targetList.push({title:'',targetList:[{title:'',content:''}]})
    },
    removeSecond(index,index1){
        this.anotherForm.targetList[index].targetList.splice(index1,1)
    },
    addSecond(index){
        this.anotherForm.targetList[index].targetList.push({title:'',content:''})
    }
}