ElemeFE / element

A Vue.js 2.0 UI Toolkit for Web
https://element.eleme.io/
MIT License
54.1k stars 14.64k forks source link

[Bug Report] el-table 组件使用 selection 且修改其宽度时,会出现意料之外的省略号。When the el-table component uses selection and changes its width, unexpected ellipses occur. #22902

Open Nobodycareszzk opened 2 months ago

Nobodycareszzk commented 2 months ago

Element UI version

2.15.14

OS/Browsers version

Chorme 125.0.6422.142(正式版本) (x86_64)

Vue version

2.7.16

Reproduction Link

https://codepen.io/pen

Steps to reproduce

将 <el-table-column type="selection" width="40"> 中的width 修改为 28至42之间,会出现省略号

What is Expected?

不会存在省略号。适应width

What is actually happening?

会存在省略号。width在28-42区间内,会存在

Nobodycareszzk commented 2 months ago

当我使用F12查看网页元素的时候,我发现selection 某一项编译为html的结果:

image

可以看到是 一个 div 中包裹了 label。 class 为 cell 的div,padding-left 和 padding-right 始终为14,,这是一个固定值,而里面content区域的宽度是与传入的 width 值有关的,而 div 里面所有的元素宽度均为14,目前我的解决方法为将 class 为 cell 的 div 的 text-overflow 设置为 clip,或者传入的width加宽(让class 为 cell 的div 中间 content 的宽度大于14,或者为 0)。但我不是很理解,text-overflow 是针对文本的,可是里面并没有文本。希望得到解答