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

最新推荐文章于 2024-04-29 03:06:53 发布

前端小白۞

最新推荐文章于 2024-04-29 03:06:53 发布

阅读量1k

点赞数 1

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

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

版权

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

55 篇文章 6 订阅

订阅专栏

IView

4 篇文章 0 订阅

订阅专栏

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

          }
        },