iView表格显示图片和文字过长显示省略号,并且Tooltip提示

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)
            ])

          }
        },

猜你喜欢

转载自blog.csdn.net/zzzz121380/article/details/126059994