elementUI开发中遇到的问题及解决方法（一）

elementUI

1.elementui中关于表单提交校验问题：

（1）需要给el-form加上:rules=“rules”,和 :model=“form”,然后给el-form-item加上prop=“name”
（2）然后data中要写对应的rules与form
（3）rules中要这么写 rules：{name:[{required:true,message:"请输入名称”，trigger：“blur”}]}
（4）form中要有name字段 form：{name：“”}，并且input的v-model要绑定form.name：model=“form”唯一的作用可能就是校验的时候有用。

2.elementui中关于表单循环多个校验问题：

（1）html代码片段：

	<el-form :model="form" :rules="rules">
                <el-form-item v-for="(item,index) in form.children" :label="'项目'+(index+1)+':'" :prop="`children.	${index}.project`" :rules="rules.project'" :key="index" label-width="120px">
                    <div>
                        <div>
                            <el-input v-model="item.project" autocomplete="off">
                                 <el-button type="danger" icon="el-icon-delete"></el-button>
                            </el-input>
                        </div>
                    </div>
                </el-form-item>
       </el-form>

(2)data代码片段

	  form:{
                name:"",
                project:"",
                desc:"",
                children:[
                    {id:"",project:"",desc:"",type:"项目"}
                ]
            },
            rules:{
                name:[{required:true,message:"请输入科室名称",trigger:'blur'}],
                project:[{required:true,message:"请输入项目名称",trigger:'blur'}]
            },

（3）需要单独给某一项设置rules，然后动态绑定prop即可，绑定的时候需注意，使用字符拼接或模板字符串。
（4）父元素的prop要和子元素的v-model是同一个数据。
（5）父元素的pros值不需要再写form前缀了，直接children.project。。。。

3.elementui中model，rules与prop之间的关系：

（1）[参考链接：](https://blog.csdn.net/m0_52711377/article/details/123705574.)
（2）关于rules的权重，首先会采用form里的，如果el-form-item设置了rules，那么就会采用这个.
（3）prop的参数对应model与rules，比如prop.name 这个会去查看model里是否有name，并且会检查rules里name的校验信息.
（4）v-model的参数对应model里的参数，prop里不写前缀，如果:model='form',那么prop='name'，不能是prop="form.name".

4.elementui里table设置自定义渲染表头-----:render-header

(1)传入自定义参数vue实例--->:render-header="(h,obj)=>renderHeader(h,obj,this)"
	(2)接收传入的参数
	    renderHeader (h,{column},vm) {
	   	return  h('i', {
                                class:'el-icon-s-fold',
                                style:'color:#409eff;margin-left:25px;',
                                on:{
                                    click:function(){
                                        vm.refreshTable = false
                                        vm.isFold = !vm.isFold
                                        vm.$nextTick(()=>{
                                            vm.refreshTable = true
                                        })
                                    }
                                }
                        })
	    }
	(3)table需要设置属性:default-expand-all="isFold"