iview在Table表格中渲染,Tooltip和render函数实现鼠标悬停气泡提示，并且汽包提示自适应换行。

南风知我意啊

已于 2023-09-28 12:24:57 修改

阅读量904

点赞数

文章标签： vue.js javascript 前端 view design

于 2023-09-28 11:52:16 首次发布

本文链接：https://blog.csdn.net/weixin_49848050/article/details/133379627

版权

本文介绍了如何在iviewTable组件中使用Tooltip和render函数实现鼠标悬停时的气泡提示，通过设置`textOverflow`,`whiteSpace`,和`line-clamp`控制内容换行和省略，以适应多行显示需求。

摘要由CSDN通过智能技术生成

iview在Table表格中渲染,Tooltip和render函数实现鼠标悬停气泡提示，并且汽包提示自适应换行。

1、view中的table没有提供鼠标移入内容悬浮，平时使用的也比较少。
2、近期遇到一个需求是：

表格内部展示3行，超出部分用省略号展示
鼠标移入tootip气泡展示
气泡展示时防止内容过多展示不全的问题

直接上代码

	 <i-table :columns="columns1" :data="data1"></i-table>

js代码

            {
              title: '简介',
              key: 'address',
              align:'center',
              width:'180',
              render(h,params) {
                return h('Tooltip',{
                  props:{
                    content:params.row.address,
                    placement:'top'
                  }
                },
                [
                  h('span',{
                    style:{
                      textOverflow:'ellipsis',
                      whiteSpace:'normal',
                      display:'-webkit-box',
                      webkitBoxOrient:'vertical',
                      webkitLineClamp:3+''        //可以随意控制展示几行
                    }
                  },params.row.address),
                  h('span',{
                    slot:'address',
                    style:{
                      whiteSpace:'normal',
                      wordBreak:'break-all',
                    }
                  },params.row.address)
                ]
                )
              },
            },

css

	.ivu-tooltip-inner{
	  white-space:normal
	}

效果图
在这里插入图片描述
上述代码完美的实现了，表格内部展示3行，超出部分用省略号代替
同时又拥有鼠标移入气泡提示效果
气泡提示过长的话，首先展示也不美观，且也不一定能全部展示出来
最优质的方案就是气泡折行展示