項目使用ElementUI,在顯示時,如果某一個數值長度超過列寬,會默認換行,如下
這樣的話造成頁面動態變化,很難看,可以通過給el-table-column增加show-overflow-tooltip樣式來解決。
<el-table-column prop="goodscode" label="貨物代碼" width="80" show-overflow-tooltip>
<template scope="scope">
<div style="text-decoration:underline;cursor:pointer;">
{{ scope.row.goodscode}}
</div>
</template>
</el-table-column>
添加了該設置後,如果數據長度無法在指定寬度完全顯示,多餘的數據會默認隱藏,不會換行,當鼠標滑過該數據時,會以tip形式彈出所有數據內容。類似於下邊
鼠標移動到“測...”上,顯示如下
注意:該屬性需要謹慎使用,如果一個頁面多列使用,會影響頁面加載速度。