在用iview开发表格的过程中,发现鼠标提示 和无数据 – 显示两个功能不能同时表现出来,代码如下
tooltip: true,
align: 'center',
render: (h, params) = >{
if (params.row.company == null || params.row.company == undefined || params.row.company == '') {
return h('div', '--')
} else {
return h('div', params.row.company)
}
}
//这样写只有无数据 -- 会表现出来,tooltip: true失效
尝试多种方法,最终找到解决方案:
html写入鼠标悬浮提示文字内容
<tooltip placement="bottom">
<button>Multiple lines</button>
<div slot="content" style="white-space: normal;">
</div>
</tooltip>
js部分
{
title: '结束时间',
key: 'endTime',
align: 'center',
render: (h, params) = >{
let texts = '--'; //表格列显示文字
if (params.row.endTime) {
if (params.row.endTime.length > 20) { //进行截取列显示字数
texts = params.row.endTime.substring(0, 20) + ".....";
} else {
texts = params.row.endTime;
}
} else {
texts = '--'
}
return h('div', [h('Tooltip', {
props: {
placement: 'bottom',
transfer: true //是否将弹层放置于 body 内
},
style: {
cursor: 'pointer',
}
},
[ //这个中括号表示是Tooltip标签的子标签
texts, //表格列显示文字
h('div', {
slot: 'content',
style: {
whiteSpace: 'normal'
}
},
params.row.endTime //整个的信息即气泡内文字
)])]);
}
}
至此大功告成
实现的功能:
1.文字超出省略显示。
2.鼠标悬浮文字位置提示全部信息内容。
3.没有信息用 – 代替。