iview在Table表格中渲染,Tooltip和render函数实现鼠标悬停气泡提示,并且汽包提示自适应换行。
1、view中的table没有提供鼠标移入内容悬浮,平时使用的也比较少。
2、近期遇到一个需求是:
- 表格内部展示3行,超出部分用省略号展示
- 鼠标移入tootip气泡展示
- 气泡展示时防止内容过多展示不全的问题
直接上代码
<i-table :columns="columns1" :data="data1"></i-table>
js代码
{
title: '简介',
key: 'address',
align:'center',
width:'180',
render(h,params) {
return h('Tooltip',{
props:{
content:params.row.address,
placement:'top'
}
},
[
h('span',{
style:{
textOverflow:'ellipsis',
whiteSpace:'normal',
display:'-webkit-box',
webkitBoxOrient:'vertical',
webkitLineClamp:3+'' //可以随意控制展示几行
}
},params.row.address),
h('span',{
slot:'address',
style:{
whiteSpace:'normal',
wordBreak:'break-all',
}
},params.row.address)
]
)
},
},
css
.ivu-tooltip-inner{
white-space:normal
}
效果图
上述代码完美的实现了,表格内部展示3行,超出部分用省略号代替
同时又拥有鼠标移入气泡提示效果
气泡提示过长的话,首先展示也不美观,且也不一定能全部展示出来
最优质的方案就是气泡折行展示