The iView table displays an ellipsis when the picture and text are too long, and the Tooltip prompts
renderings
the code
{
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)
])
}
},