ElementUI的select组件的option的label slot里的错位问题

Cejauh 发布于 2021-07-12 1555 次阅读


AI 摘要

在使用ElementUI的select组件时,您是否也遭遇了option插槽中的错位问题?尽管模仿官方示例,样式依然不如意。本文将揭示这一困扰背后的真相,并分享令人意外的解决方案:只需在el-tag外层添加一个空格,竟能完美修复错位!快来深入了解这一简单而有效的技巧,让您的开发不再受限。

标题很拗口,但是就是这个意思。

问题

本问题实际描述是,当使用select组件,并且为option使用了插槽之后,像官方里的那样使用style="float: right;" 后 导致错位,如下图所示

右边的tag贴顶了,但是返回去看官方文档里的代码,却没有问题。

仔细看官方的例子,官方在插槽里用的是纯文本<span></span>,而el-tag也会自动转为span,但依然是样式错误。

在此省略一系列尝试之后,终于发现解决办法,特此记录,以便自己和其他有相同问题的朋友查阅。

解决

在el-tag的外层加一个空格即可解决问题,注意不是键盘上的space,而是

&nbsp;

此时错位问题完美解决!

May we meet again.
最后更新于 2025-05-07