Element UI的show-overflow-tooltip
屬性依賴于檢測文本內容的實際寬度與容器寬度的比較,當使用<div>
等塊級元素時,會破壞這個檢測機制。
解決方案
移除div包裝:直接在模板中使用文本內容,不要用div包裝
使用span代替div:如果必須包裝內容,使用行內元素span
確保列寬度設置:必須為列設置width或min-width屬性
show-overflow-tooltip屬性用法
直接添加到
el-table-column
上,不需要值需要配合列寬度設置(width或min-width)使用
在自定義模板中避免使用塊級元素包裝內容
當內容超出列寬度時,會自動顯示省略號并在hover時顯示完整內容的提示框
<el-table-column prop="CommandTime" label="采集時間" min-width="180" show-overflow-tooltip><template #default="scope"><!-- <div> -->{{ scope.row.CommandTime }}<!-- </div> --></template></el-table-column>