el-table-column內容不自動換行

項目使用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形式彈出所有數據內容。類似於下邊

鼠標移動到“測...”上,顯示如下

注意:該屬性需要謹慎使用,如果一個頁面多列使用,會影響頁面加載速度。

優化參考:https://github.com/ElemeFE/element/issues/3478

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章