在iview的Table表格中织咧,如果數(shù)據(jù)超出當(dāng)前列的寬度胀葱,多余的部分會折行顯示,使得該行的高度增加笙蒙。為了實(shí)現(xiàn)*
文本將不換行抵屿,超出部分顯示為省略號
的效果,iview提供了表頭屬性ellipsis捅位。然而這個屬性卻有一個弊端轧葛,就是顯示為省略號的部分對用戶來說是不可見的,非常影響體驗(yàn)艇搀,而且在iview文檔中尿扯,作者并未給出任何解決辦法。
最簡單的解決辦法是給相關(guān)數(shù)據(jù)增加title屬性焰雕,使得鼠標(biāo)移入時可以顯示全部信息衷笋。在SegmentFault上找到了相關(guān)代碼
要在column中的--表格列的配置--描述添加
注意area的值,后面也要相應(yīng)對應(yīng)是area的值淀散,否則找不到data中的area的值右莱,就會報錯。
{
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)
])
}
}