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"