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

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行，超出部分用省略号代替
同时又拥有鼠标移入气泡提示效果
气泡提示过长的话，首先展示也不美观，且也不一定能全部展示出来
最优质的方案就是气泡折行展示