iview tables組件 render時添加title屬性


在iview的Table表格中,如果數據超出當前列的寬度,多余的部分會折行顯示,使得該行的高度增加。為了實現*

文本將不換行,超出部分顯示為省略號

的效果,iview提供了表頭屬性ellipsis。然而這個屬性卻有一個弊端,就是顯示為省略號的部分對用戶來說是不可見的,非常影響體驗,而且在iview文檔中,作者並未給出任何解決辦法。
最簡單的解決辦法是給相關數據增加title屬性,使得鼠標移入時可以顯示全部信息。在SegmentFault上找到了相關代碼 =>

{
title: '地域',
key: 'area',
width: 100,
align: 'center',
render: (h, params) => {
return h('div', [
h('span', {
style: {
display: 'inline-block',
width: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
},
domProps: {
title: params.row.area
}
}, params.row.area)
])
}
}
--------------------- 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM