iview table换行_iview的table中Tooltip的使用

这篇文章主要介绍了iview-admin中在table中使用Tooltip提示效果。

1. table中文字溢出隐藏，提示气泡展示所有信息

longText(item){

item.render = (h, params)=>{

// 处理文字，溢出用点代替

let txt = params.row[params.column.key]

let tableTxt = null

if(txt){

if(txt.length > item.longText){

tableTxt = txt.substring(0, item.longText) + '.....'

}else{

tableTxt = txt

}

}

return h('Tooltip', {

props: {

placement: 'top'

}

},[

tableTxt,

h('span', {slot: 'content', style: {whiteSpace: 'normal', wordBreak: 'break-all'}}, txt)

])

}

return item

},

// style是 必须的，否则无法换行显示

2. Tooltip 折行显示效果

{

title: '