Bug Type: Component
Environment
- Vue Version:
3.4.27
- Element Plus Version:
2.7.3
- Browser / OS:
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 Edg/121.0.0.0
- Build Tool:
Vite
Reproduction
Related Component
el-table
Reproduction Link
Element Plus Playground
Steps to reproduce
- 表单内嵌表格并为表格开启
showOverflowTooltip
属性 - 表格列插槽渲染下拉表单项,同时设置
ElSelect.placeholder
和ElFormItem.rules.required.message
- 调用表单
validate
后查看悬浮提示的错误信息
What is Expected?
错误信息仅提示 ElFormItem.rules.required.message
。
What is actually happening?
ElForm
嵌套 ElTable
提示了 ElSelect.placeholder
+ ElFormItem.rules.required.message
Additional comments
(empty)
5条答案
按热度按时间fhity93d1#
有人关注吗👁️👁️
wmtdaxz32#
Demo
我稍微调节了一下demo,我认为是showOverflowTooltip的问题。
在我的Demo:
验证失败的提示
,此时由于单元格空间足够,不会出现tooltip验证提示
都展示出来,但实际上,仅仅只是验证提示
超出空间,预期上tooltip应该仅展示超出单元格空间的验证提示
即可eulz3vhy3#
感觉是样式的问题,我调试过程中
validateMessage
正确的被传到了组件中即使改为这样也会显示
placeholder
但是这样就不会显示toptip
推测可能是这里的问题
mm9b1k5b4#
Demo
我稍微调节了一下demo,我认为是showOverflowTooltip的问题。 在我的Demo:
验证失败的提示
,此时由于单元格空间足够,不会出现tooltip验证提示
都展示出来,但实际上,仅仅只是验证提示
超出空间,预期上tooltip应该仅展示超出单元格空间的验证提示
即可但是
ElSelect
换成ElInput
,错误显示就正常了。0h4hbjxa5#
Demo
我稍微调节了一下demo,我认为是showOverflowTooltip的问题。 在我的Demo:
验证失败的提示
,此时由于单元格空间足够,不会出现tooltip验证提示
都展示出来,但实际上,仅仅只是验证提示
超出空间,预期上tooltip应该仅展示超出单元格空间的验证提示
即可但是
ElSelect
换成ElInput
,错误显示就正常了。此原因是
ElInput
的placeholder是真正的placeholder(在dom结构中并不存在文本节点),ElSelect
的placeholder是利用span模拟的,showOverflowToolip基于css实现文本省略,当空间不足以展示内容时,内容被省略,在tooltip时展示全部文本内容,ElSelect校验失败时,超出单元格空间,tooltip展示全部内容文本(span实现的placeholder和error tip),ElInput校验失败后,tooltip仍然会展示全部文本内容,但placeholder内容不在dom中占据节点,因此不会展示出来。两个按钮超出宽度时的表现:
ElSelect的dom结构:
ElInput的dom结构:
因此,这可能暂时没有好的解决办法,不过,我想您可以通过自定义el-column的内容来实现您期望的功能,这里有一个简易的Demo