iview的table中Tooltip使用
程序员文章站
2024-01-02 11:08:58
...
这篇文章主要介绍了iview-admin中在table中使用Tooltip提示效果。
1. table中文字溢出隐藏,提示气泡展示所有信息
jLongText(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: '状态监控',
align: 'center',
key: 'stat'
render: (h, params) => {
return h('Tooltip', {
props: {
placement: "right"
}
},[
stat,
[
h('p', { slot: 'content'},'CPU:11.1%'),
h('p', { slot: 'content'},'内存:5/12GB')
]
]);
}
}
// 使用多个标签实现多行显示,而不是换行