场景描述:
在el-table的Action列表中,内嵌了el-popover代码,又在el-popover代码中,内嵌了el-form,当我触发表单save操作时,表单校验规则触发了,但校验提示却没有展示。
解决思路:
在讲解决思路之前,先介绍下el-popover,就拿当前场景来说,它会在表格的单元格中存在一个表单dom,当你触发el-popover的时候,它会移除当前单元格的表单dom,然后在body结束标签前新增一个表单dom(表单dom是嵌套在popover里面的)
我这里的实际解决方案,就是动态的ref(在el-form加上动态的ref)和key(在el-popover加上动态的key),如果仅有动态的ref,第一个表格校验提示不显示,其它正常。如果是只有key,没有动态ref,提示会出现在最后一个。
核心代码分享:
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950// 表格Action列代码
<el-table-column key=
"action"
min-width=
"145"
label=
"Action"
fixed=
"right"
>
<template slot-scope=
"scope"
>
<el-popover popper-class=
"auth-popover"
placement=
"left-start"
width=
"400"
trigger=
"click"
:key=
"scope.row.id"
>
<div class=
"field-popover-title"
>Example</div>
<div class=
"field-popover-content"
>
<el-form :ref=
"'form' + scope.row.id"
:model=
"form"
:rules=
"rules"
label-width=
"352"
class=
"demo-ruleForm"
>
<el-form-item label=
"Remark"
prop=
"solve"
>
<el-input type=
"textarea"
rows=
"5"
v-model=
"form.solve"
placeholder=
"Please input solve"
maxlength=
"500"
show-word-limit>
</el-input>
</el-form-item>
</el-form>
</div>
<el-button @click=
"handleSave(scope.row)"
class=
"saveMark"
style=
"margin-left:auto;"
>Save</el-button>
<el-button slot=
"reference"
>Solve</el-button>
</el-popover>
</template>
</el-table-column>
// 属性定义
data(){
return
{
form:{
solve:
''
,
},
rules:{
solve:[
{ required:
true
, message:
'Please Input solve'
,trigger:[
'blur'
,
'change'
] },
]
},
}
},
// 调用方法代码
methods:{
handleSave({ id }){
this
.$refs[
'form'
+ id].validate(async(valid) => {
if
(valid) {
console.log(
'Success'
)
}
else
{
console.log(
''
)
}
})
}
}