iview+vue 表格任一项实现鼠标划上显示内容

时间:2023-03-10 06:06:02
iview+vue 表格任一项实现鼠标划上显示内容

在新版本的iview中,表格新增了tooltip功能:

iview+vue 表格任一项实现鼠标划上显示内容

但做项目时并不是新的iview版本,又不想升级,如何才能实现当内容过多鼠标划上显示内容?下边是我做项目时的改动:

 {
// fixed: 'left',
title: '编码',
align: 'center',
key: 'code',
minWidth: ,
maxWidth: ,
ellipsis: true,
render: (h, params) => {
return h('Tooltip', {
props: {
content:this.data[params.index].code,
placement: 'top'
}
},this.data[params.index].code)
}
},
{
title: '名称',

提交之后发现,未显示全部内容,仔细检查发现是内容超出了,与背景颜色相同而不容易看出来:

iview+vue 表格任一项实现鼠标划上显示内容

于是修改了一下代码:

 {
// fixed: 'left',
title: '编码',
align: 'center',
key: 'code',
minWidth: ,
maxWidth: ,
ellipsis: true,
render: (h, params) => {
return h('Tooltip', {
props: { placement: 'top' }
}, [
this.data[params.index].code,
h('span', {
slot: 'content',
style: {
whiteSpace: 'normal',
wordBreak: 'break-all'
}
},this.data[params.index].code)
])
}
},
{
title: '名称',

就可以达到目的了(为了节省空间也就不上图了)。

原因:显示内容超出的是因为tooltip默认为单行显示,通过设置多行显示即可。

总结:

 在使用iview 的table组件时,要注意render和renderHeader的作用与重要性。