element-plus [Component] [table] 表单嵌套表格验证错误后提示消息重复

wgx48brx  于 5个月前  发布在  其他
关注(0)|答案(5)|浏览(51)

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

  • el-table

Element Plus Playground

Steps to reproduce

  1. 表单内嵌表格并为表格开启 showOverflowTooltip 属性
  2. 表格列插槽渲染下拉表单项,同时设置 ElSelect.placeholderElFormItem.rules.required.message
  3. 调用表单 validate 后查看悬浮提示的错误信息

What is Expected?

错误信息仅提示 ElFormItem.rules.required.message

What is actually happening?

ElForm 嵌套 ElTable 提示了 ElSelect.placeholder + ElFormItem.rules.required.message

Additional comments

(empty)

fhity93d

fhity93d1#

有人关注吗👁️👁️

wmtdaxz3

wmtdaxz32#

Demo

我稍微调节了一下demo,我认为是showOverflowTooltip的问题。
在我的Demo:

  1. 点击验证
  2. 可以看到表单触发验证,并在选择框下面出现 验证失败的提示 ,此时由于单元格空间足够,不会出现tooltip
  3. 点击更新单元格高度,此时单元格空间不足,出现tooltip,但会把选择框的值(无论是选择后的值还是placeholder)和 验证提示 都展示出来,但实际上,仅仅只是 验证提示 超出空间,预期上tooltip应该仅展示超出单元格空间的 验证提示 即可
eulz3vhy

eulz3vhy3#

感觉是样式的问题,我调试过程中 validateMessage 正确的被传到了组件中

即使改为这样也会显示 placeholder

但是这样就不会显示toptip

推测可能是这里的问题

mm9b1k5b

mm9b1k5b4#

Demo

我稍微调节了一下demo,我认为是showOverflowTooltip的问题。 在我的Demo:

  1. 点击验证
  2. 可以看到表单触发验证,并在选择框下面出现 验证失败的提示 ,此时由于单元格空间足够,不会出现tooltip
  3. 点击更新单元格高度,此时单元格空间不足,出现tooltip,但会把选择框的值(无论是选择后的值还是placeholder)和 验证提示 都展示出来,但实际上,仅仅只是 验证提示 超出空间,预期上tooltip应该仅展示超出单元格空间的 验证提示 即可

但是 ElSelect 换成 ElInput ,错误显示就正常了。

0h4hbjxa

0h4hbjxa5#

Demo
我稍微调节了一下demo,我认为是showOverflowTooltip的问题。 在我的Demo:

  1. 点击验证
  2. 可以看到表单触发验证,并在选择框下面出现 验证失败的提示 ,此时由于单元格空间足够,不会出现tooltip
  3. 点击更新单元格高度,此时单元格空间不足,出现tooltip,但会把选择框的值(无论是选择后的值还是placeholder)和 验证提示 都展示出来,但实际上,仅仅只是 验证提示 超出空间,预期上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

相关问题