Bootstrap

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

          }
        },

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;