Vue + ElementUI怎么处理超大表单,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
整体思路 <李> 大表单根据业务模块进行拆分
<李> 保存时使用<代码> el-form> 验证方法进行校验(<强>循环对每一个拆分的组件进行校验)
<李> mixin对每个组件的公共提取(也利于后期项目的维护)
开始 <李> 这里以<代码>拆分2个组件为例:<代码> form1 ,<代码> form2> <李>
这里两个组件为什么<代码> ref,模型> 后形成边会进行说明(为了方便后期维护)
//,form1 组件
& lt; template>
,,,& lt; el-form
,,,,,ref=癴orm"
,,,,,:模型=癴orm"
,,,,,label-width=?0 px"
,,,的在
,,,,,& lt; el-form-item 标签=靶彰?道具=皀ame"比;
,,,,,,,,,& lt; el-input v模型=癴orm.name",/比;
,,,,,& lt;/el-form-item>
,,,& lt;/el-form>
& lt;/template>
& lt; script>
export default {
,,名字:& # 39;form1 # 39;
,,,道具:,{
,,,,,形式:,{}
,,},
数据才能(),{
,,,return {
,,,,,规则:,{
,,,,,,,名字:,(
,,,,,,,,,{,要求:真的,,信息:,& # 39;请输入姓名& # 39;,,触发:,& # 39;模糊# 39;,}
,,,,,,,)
,,,,,}
,,,}
,,},
方法:才能,{
,,,//,这里是是为了父组件循环调用校验
,,,validForm (), {
,,,,,,,let result =false
,,,,,,,,美元refs.form.validate (valid =祝辞,valid ,,, (result =, true))
,,,,,,,return 结果
,,,}
,,,//,我这里还用了另一种方式写的,但是循环校验的时候是承诺对象,有问题,望大佬们指点一二
,,,validForm (), {
,,,,,,,//,明明这里输出的结构是,Boolean 值,但在父组件循环调用之后就是承诺类型,需要转换一下才行
,,,,,,return 这。美元refs.form.validate () .catch (e =祝辞,console.log (e))
,,,}
,,}
}
& lt;/script>//,form2 组件
& lt; template>
,,,& lt; el-form
,,,,,ref=癴orm"
,,,,,:模型=癴orm"
,,,,,label-width=?0 px"
,,,的在
,,,,,& lt; el-form-item 标签=澳炅洹?道具=癮ge"比;
,,,,,,,,,& lt; el-input v模型=癴orm.age",/比;
,,,,,& lt;/el-form-item>
,,,& lt;/el-form>
& lt;/template>
& lt; script>
export default {
,,名字:& # 39;form2 # 39;
,,道具:{
,,,,,形式:,{}
,,},
数据才能(),{
,,,return {
,,,,,规则:,{
,,,,,,,名字:,(
,,,,,,,,,{,要求:真的,,信息:,& # 39;请输入年龄& # 39;,,触发:,& # 39;模糊# 39;,}
,,,,,,,)
,,,,,}
,,,}
,,},
方法:才能,{
,,,//,这里是是为了父组件循环调用校验
,,,validForm (), {
,,,,,,,let result =false
,,,,,,,,美元refs.form.validate (valid =祝辞,valid ,,, (result =, true))
,,,,,,,return 结果
,,,}
,,}
}
& lt;/script> <李> 看一下父组件怎么引用的
//,父组件
& lt; template>
,,,& lt; div 类=皃arent"比;
,,,,,,,& lt; form1 ref=癴orm1",:形式=癴ormData.form1",/比;
,,,,,,,& lt; form2 ref=癴orm2",:形式=癴ormData.form2",/比;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
