iview表格显示缩略图，鼠标悬停显示图片

前端小白۞

已于 2022-09-07 16:26:56 修改

阅读量559

点赞数

分类专栏：大前端 IView 文章标签：前端

于 2022-09-07 16:23:59 首次发布

本文链接：https://blog.csdn.net/zzzz121380/article/details/126748049

版权

大前端同时被 2 个专栏收录

55 篇文章 6 订阅

订阅专栏

IView

4 篇文章 0 订阅

订阅专栏

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'
                      }
                    },'暂无缩略图')
                  ])]
            )
          }
        },