iView表格显示图片和文字过长显示省略号,并且Tooltip提示
效果图
代码
{
title: 'LOGO',
key: 'logo',
align: "center",
render:(h,params)=>{
return h('div',{
style:{
width:'50px',
height:'50px',
overflow:'hidden',
}
},[
h('img',{
attrs:{src:params.row.logo}
},)
])
}
},
{
title: '接口名称',
key: 'name',
align: "center",
},
{
title: '概要',
key: 'simpleDesc',
align: "center",
render:(h,params)=>{
return h('Tooltip', {
props: {
content: params.row.simpleDesc,//tooltip提示框内容
transfer: true,//防止最后一行被挡住
maxWidth: 200,//最大宽度(tooltip的宽度)
}
},[
h('span', {
style: {
display: 'inline-block',
width: '200px',//设置table表格显示内容的宽度,(不设置会全部显示,没有省略号)
overflow: 'hidden',
textOverflow: 'ellipsis',//设置省略号
whiteSpace: 'nowrap'//设置不换行(如果不设置默认换行,那么不会显示省略号)
},
domProps: {title: params.row.simpleDesc},//如果不要tooltip提示,可以加这个提示
}, params.row.simpleDesc)
])
}
},