1、iview表格显示图片
（1）效果图
（2）代码
{
title:'缩略图',
key:'thumbnail',
align:'center',
width:250,
render:(h,params)=>{
return h('div',{
style:{
textAlign:'center',
margin:'10px'
}
},[
h('img',{
style:{
width:'200px',
height: '100px',
border:'1px solid #4c4c4c',
borderRadius:'5px',
padding:'10px',
display:params.row.thumbnail?'block':'none',
},
// attrs:{src:params.row.thumbnail?params.row.thumbnail:require('../../../assets/SDK_thumbnail.png')}
attrs:{
src:params.row.thumbnail}
}),
h('span',{
style:{
display:params.row.thumbnail?'none':'block',
width: 'auto',
height: '100px',
border: '1px solid #4c4c4c',
borderRadius:'5px',
color: '#727272',
lineHeight: '100px',
fontSize: '12px'
}
},'暂无缩略图')
])
}
},
2、iview表格显示小图标，鼠标悬停显示大图片
（1）效果图
（2）代码
{
title:'缩略图',
key:'thumbnail',
align:'center',
render:(h,params)=>{
return h('Poptip',
{
props: {
title: '',
placement: 'top',
transfer:true,
width: 250,
trigger:'hover'
},
},
[
h('Icon',
{
props: {
type: 'ios-image',
},
style: {
cursor:'pointer'
},
}),
h('div',{
slot: 'content',
style:{
textAlign:'center',
margin:'10px'
}
},[
h('img',{
style:{
width:'200px',
height: '100px',
border:'1px solid #4c4c4c',
borderRadius:'5px',
padding:'10px',
display:params.row.thumbnail?'block':'none',
},
// attrs:{src:params.row.thumbnail?params.row.thumbnail:require('../../../assets/SDK_thumbnail.png')}
attrs:{
src:params.row.thumbnail}
}),
h('span',{
style:{
display:params.row.thumbnail?'none':'block',
width: 'auto',
height: '100px',
border: '1px solid #4c4c4c',
borderRadius:'5px',
color: '#727272',
lineHeight: '100px',
fontSize: '12px'
}
},'暂无缩略图')
])]
)
}
},