背景
最近需要实现一个列表中一项展示部分文案,鼠标移动到该文案上,在左边悬浮提示框。
比如iview组件内这种效果:
因为使用的是render来进行渲染列表的,所以就需要在render中渲染Tooltip。
代码如下:
<Table
:columns="cluesTitle"
:data="cluesList"
></Table>
cluesTitle:[
{
title: "内容",
key: "content",
align: "center",
ellipsis: true,
width: 150,
render: (h, params) => {
let texts = params.row.content ? params.row.content : '-';
return h('div', [h('Tooltip', {
props:{
placement: 'left'
}
},
[
texts,
h('span', {
slot: 'content', //slot属性
style: {
whiteSpace: 'nowrap',
wordBreak: 'break-all'
}
}, params.row.content || '-')
]
)])
}
},
]